Question

我正在寻找Angular 2的解决方案，用于下面解释的场景：

在这种情况下，top-nav包含加载子模块的链接，sub-nav有链接来更新子模块的内容。

网址应映射为：

/ home =＆gt;在主组件路由器插座中加载主页
/ submodule =＆gt;加载主组件路由器插座中的子模块，默认情况下应显示子模块的主页和子导航栏
/ submodule / feature =＆gt;在子模块的路由器插座中加载该功能

app模块（和app组件）包含一个导航到不同子模块的顶部导航栏，app组件模板可能如下所示

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

但这是复杂性。我需要我的子模块与第二级导航栏和他们自己的路由器插座具有相似的布局，以加载他们自己的组件。

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

我尝试了所有选项并在任何地方进行搜索，但找不到具有路由器插座的子模块中的默认模板（如app组件）的解决方案，并且还在内部路由器插座中加载子模块的内容而不会丢失子NAV。

我很感激任何意见或想法

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

Answer 2

使用：

DbContext

完整示例：

HTML

RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

app.module.ts

<div class="tabs tinyscroll">
  <button *ngFor="let tab of tabs"
  [routerLink]="[{ outlets: { sub: [tab.name] } }]"
  routerLinkActive="selected">
    <span>{{ tab.label }}</span>
  </button>
</div>

<section>
  <router-outlet name="sub"></router-outlet>
</section>

Answer 3

你必须提到路线中的出口名称在路由中提到您的路由器插座名称，如“outlet：'sub”

routes: Routes = [
  {path:'', redirectTo: 'login', pathMatch: 'full'},
  {
    path: 'login',
    component: LoginComponent,
    
  },
  { path: 'home',
    component: AppComponent,
      children: [
        {path: 'home/pdf',component: SideMenuPage,outlet:"sub" },
        {path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},
        ]},
 

];

Angular 2 - 子模块路由和嵌套<router-outlet>

3 个答案: