Question

我正在使用Angular 8，并且在使用延迟加载的子模块时遇到了一些路由问题。

app-routing.module.ts

...
const routes: Routes = [
   {
      path: :id,
      component: ParentComponent,
      children: [
         { path: 'child', loadChildren: './child.module#ChildModule' }
      ]
   }
]
...

child-routing.module.ts

...
const routes: Routes = [
   { path: 'child1', component: Child1Component },
   { path: 'child2', component: Child2Component }
]
...

现在，我们已经通过这些方式进行了路由。 foo.com/123/child/child1-> Child1Component foo.com/123/child/child2-> Child2Component

在这里，我尝试导航到Child1Component中的foo.com/123/child/child2。我当时以为子模块与应用模块分开，并且它是延迟加载的，因此此代码将正常工作。

child2.component.ts

...
constructor(private router: Router) {}

...
this.router.navigate(['child/child2']);
...

但是，一旦我启动了该应用程序，它就会导航到foo.com/child/child2。我期待foo.com/123/child/child2。

如果我进行了这些更改，它将按预期工作。

child2.component.ts

...
private parentId;
constructor(private router: Router, private route: ActivatedRoute) {
   this.route.parent.parent.params.subscribe((params) => {this.parentId = params.id});
}

...
this.router.navigate([this.parentId, 'child', 'child2']);
...

它正在从组件内部的URL获取parentId并使用它进行导航。但是我不喜欢这种方法，因为它无法扩展。如果更改路由参数名称或添加更多路由参数，则还必须更新子组件以进行路由。

在延迟加载的子模块上定义的子组件中，是否有更好的方法来处理路由？

Answer 1

按照Angular docs

根据提供的命令数组和起点进行导航。如果未提供起始路线，则导航是绝对的。

还有Angular docs，

路由器在链接参数列表中支持类似目录的语法，以   帮助指导路线名称查找：

./或没有相对于当前水平的前斜线。

../在路由路径中上一层。

您可以将相对导航语法与祖先路径结合使用。如果   您必须导航到同级路线，可以使用../   习惯上一层楼，然后沿着同级路线走   路径。

因此，您可以按照Angular示例使用相对路线

this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });

this.route是ActivatedRoute的实例。

this.router.navigate函数无法按预期运行

1 个答案: