用参数定义路由时,在angular中的路由问题。

我有两条路线是这样定义的

children: [
                            {
                                path: 'Templates', component: TemplatesComponent
                            },
                            {
                                path: 'AddEditTemplate/:id', component: AddTemplatesComponent
                            }]

我在AddTemplatesComponent视图上有 “取消 “按钮。

<a class="btn btn-default no-margin" [routerLink]="['../Templates']">Cancel</a>

但是点击取消按钮,它没有导航到 “Templates “组件,url从 “AddEditTemplate5 “变为 “AddEditTemplateTemplates”。但网址应该改变为 “模板”。

我做错了什么,请帮助我。

解决方案:

事实上,你必须在路径中向上走两个路径。例如,我们假设你现在在 root/AddEditTemplate/2. 如果你沿着一条小路往上走,你就会到了 root/AddEditTemplate. 所以,要在 root 再到 root/Templates你应该走2条路线,在路径上。

<a class="btn btn-default no-margin" [routerLink]="['../../Templates']">Cancel</a>

看看这个 Stackblitz演示 => 只关注里面的文件。module-1 文件夹。

[更新]。 如果你想用编程方式导航,你可以使用… navigate 的方法 Router 有2个参数:与上面相同的路由和一个配置选项,包括 relativeTo 属性,指定当前路径作为计算相对路径的起点。根据 文件: 如果没有提供起始路线,则为绝对导航。.

constructor(
  private _router: Router,
  private _activatedRoute: ActivatedRoute
) {}

...

_navigate() {
  this._router.navigate(['../../Templates'], {
    relativeTo: this._activatedRoute
  });
}

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/5606.html

(0)
上一篇 2022年6月30日 上午10:10
下一篇 2022年6月30日 上午11:00

相关推荐

发表评论

登录后才能评论