Angular 2 - 子模块路由和嵌套

Question

我正在为下面解释的场景寻找 Angular 2 的解决方案:

在这种情况下，顶部导航包含加载子模块的链接，子导航包含更新子模块内容的链接。

URL 应映射为:

• /home => 在主要组件路由器导出加载主页
• /submodule => 在主要组件路由器导出加载子模块，默认情况下应显示子模块的主页和子导航栏
• /submodule/feature => 在子模块的路由器导出加载功能

应用模块(和应用组件)包含一个顶部导航栏，用于导航到不同的子模块，应用组件模板可能如下所示

<top-navbar></top-navbar>
<router-outlet></router-outlet>

但这就是复杂性。我需要我的子模块具有类似的布局，带有二级导航栏和它们自己的路由器导出以加载它们自己的组件。

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

我尝试了每个选项并到处搜索，但找不到在带有路由器导出的子模块中使用默认模板(如应用程序组件)并在不丢失内部路由器导出的情况下加载子模块内容的解决方案子导航。

如果有任何意见或想法，我将不胜感激

Answer 1

html 页面将如下所示。

主页

<top-navbar></top-navbar>
<router-outlet></router-outlet>

子模块页面

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

点击顶部导航栏中的导航，主路由导出将分别路由。

点击子导航栏时，router-outlet [sub] 将分别进行路由。

HTML 没问题，技巧将在编写 app.routing 时出现

app.routing.ts

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  { path: 'home',
    component: homeComponent,
    children: [
      {
        path: 'module1',
        component: module1Component,
        children: [
          {
            path: 'submodule11',
            component: submodule11Component,
          },
          {
            path: '',
            redirectTo: 'submodule11',
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'module2',
        component: module2omponent,
        children: [
          {
            path: 'submodule21',
            component: submodule21Component,
          },
          {
            path: '',
            redirectTo: 'submodule21',
            pathMatch: 'full'
          }
        ]
      }
    ]
  },
  {
    path: 'about',
    component: aboutComponent
  }
]

希望对你有所帮助。

更多详情 https://angular.io/guide/router