Question

我正在使用这样的嵌套路由，我期望它应该在 app.component.html 中的路由器插座的上层显示 test2Component，如果 testComponent 中不存在路由器插座。

const appRoutes: Routes = [
  {
    path: "",
    component: TestComponent,
    children: [{ path: "test2", component: Test2Component }]
  }
];

Playground

Answer 1

您可以尝试在路由中使用延迟加载，但这需要您制作更多模块。例如，您可以将第一个路由器出口放在您的应用程序组件中：

'app.component.html'

<router-outlet><router-outlet>

使用与创建组件的方式类似的 angular/cli 创建一个新的模块、路由器和组件：

ng g c test
ng g c test/Test2
ng g m test/TestModule
ng g m test/TestRouter --routing

注意：确保将 TestModule 导入到基础应用模块中，并且将 Test & Test2 组件导入到 TestModule 中。

然后在您的基本应用路由器文件中添加以下内容：

'app-routing.module.ts'

const appRoutes: Routes = [
  {
    path: 'test',
    loadChildren: () =>
      import('./test/test.module').then(m => m.TestModule)
  }];

然后转到您创建的新模块和路由器并添加以下内容：

'test-router.module.ts'

const routes: Routes = [
  {
    path: '',
    component: TestComponent,
    children: [
      { path: 'test2', component: Test2Component }
    ]
  }];

最后将router-outlet添加到父TestComponent

'test.component.html'

<h2>Test component<h2>
<router-outlet><router-outlet>

如果你想看一个例子，你可以看看我如何在我的一个项目中使用延迟加载。

应用基本路由器示例：https://github.com/shahidfoy/chatter/blob/master/chatter/chat-app/src/app/app-routing.module.ts

应用子路由器示例：https://github.com/shahidfoy/chatter/blob/master/chatter/chat-app/src/app/streams/streams-routing.module.ts

通过路由器插座的嵌套路由投影

1 个答案: