如何在动态加载的 Angular 模块中正确设置路由？

Question

我有一个带有路由器插座的应用程序，我想在其中延迟加载带有自己子路由的模块。

这应该给出路线：

/
/lazy1/child1
/lazy1/child2

在根应用模块中，我定义了一些将延迟加载子模块的路由

export const routes: Routes = [
  {path:'', component: HelloComponent},
  {path: 'lazy1', loadChildren: () => import('./lazy1-module/index').then(mod => mod.Lazy1Module)}
];

在 Lazy1Module 中，以下路线

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

我像往常一样使用 RouterModule.forChild(routes) 添加。

这似乎工作正常，当我转到 /lazy1/child1 时，这解决得很好。

但是，当我尝试在孩子之间导航时，我遇到了麻烦。 由于其自身的延迟加载模块不应该知道或关心自身外部的路由，我假设我可以使用

从 child1 导航到 child2

this.router.navigate(["child2"]);

这会导致“找不到路由”错误。

我可以通过添加使其工作

this.router.navigate(["child2"], { relativeTo: this.route.parent });

但这似乎是错误的。 “../child2”也不起作用。

向路由器添加日志记录，似乎它在路由前面添加了一个“/”并开始从根目录解析它，也忽略任何点。

我正在使用 Angular 8.2.14

此处为 Stackblitz 示例：https://stackblitz.com/edit/angular-bqdchr

Answer 1

看看这个stackblitz:

我认为这是因为你的惰性路由不知道它自己的根所以你需要添加：

path:'', component: LazyComponent, children: [
  { path: 'child1', component: Child1Component },
  { path: 'child2', component: Child2Component }
]

Answer 2

您可以通过绝对或相对路径导航。

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

正在使用绝对路径（因为没有relativeTo 标志）并导航到/child2。 您没有为 /child2 但为 /lazy1/child2 定义路由。

控制台错误告诉你：

错误：无法匹配任何路由。网址段：'child2'

如果你将它重写为：

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

您的工作示例使用的是相对路径：

this.router.navigate(["child2"], { relativeTo: this.route.parent });

您当前路由的父级是lazy。从那里您将导航到child2，这是一条有效路线 (/lazy/child2)。

请参阅https://angular.io/api/router/Router#navigate 了解更多信息。 以下内容也可能很有趣：https://angular.io/guide/router#router-links

Answer 3

你的懒惰路线：

const routes: Routes = [
  {path:'',children:[
    {path: 'child1', component: Child1Component},
    {path: 'child2', component: Child2Component}
  ]},
 {path: '**', redirectTo: 'child1'}
];

那么，你就可以了

this.router.navigate(["child2"], { relativeTo: this.route.parent });
//or
this.router.navigate(["../child2"],{ relativeTo: this.route});