Angular 2 – 子模块路由和嵌套

发布时间：2020-12-17 08:01:50 所属栏目：安全来源：网络整理

导读：我正在寻找Angular 2的解决方案,用于下面解释的场景：在这种情况下,top-nav包含加载子模块的链接,sub-nav有链接来更新子模块的内容. 网址应映射为： / home =在主组件路由器插座中加载主页 / submodule =将子模块加载到主组件路由器插座中,默认情况下应显示

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

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

网址应映射为：

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

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

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

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

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

我尝试了所有选项并在任何地方搜索但是找不到具有路由器插座的子模块中的默认模板(如app组件)的解决方案,并且还在内部路由器插座中加载子模块的内容而不会丢失子导航.

我很感激任何意见或想法

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/docs/ts/latest/guide/router.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!