Question

我有角度为5的样本路由。这3个组件被导入到该模块中。组件标记在john组件的文件夹下生成，james组件在mark组件的文件夹下生成。

我想通过如下所示的路径加载james组件：https://my-website/john-route/mark-route/james-route所以我在模块文件中创建了这些路由。

  const routes: Routes = [
  {
    path: 'john-route',
    component: JohnComponent,
    children: [
      {
        path: 'mark-route',
        component: MarkComponent,
        children: [
          {
            path: 'james-route',
            component: JamesComponent
          }
        ]
      }
    ]
  }
];

但我的问题是，它只会加载到使用此[routerLink]="['mark-route']"标记组件。在使用此[routerLink]="['james-route']"的james组件上，它仅在https://my-website/john-route/mark-route/james-route中显示正确的路径URI，但不会在页面中加载该组件。这里发生了什么，如何解决这个问题或者最佳解决方案是什么？

Answer 1

您的MarkComponent还需要router-outlet。

要使用子路由，您的父组件必须具有标记部分

<router-outlet></router-outlet>

这可以让您的子路由放置在父组件中。对于具有子组件的所有组件，必须执行相同的操作。

有关详情，请参阅Routing & Navigation in Angular

如何在Angular 5中嵌套2级以上的儿童路线？

1 个答案: