使用标签路由器导航进行延迟加载

时间:2017-04-12 12:57:14

标签: angular angular2-routing angular-material2

使用延迟加载模块的路由器导航时似乎存在问题。如果我删除延迟加载,这工作正常。但根据延迟加载模块,这是我的设置:

在我的app.template中,我定义了主路由器插座。

我有以下根应用程序路由器

export const ROUTES: Routes = [
  {
    path: 'user/:id', loadChildren: './user/profile/profile.module#ProfileModule'
  }
]

当配置文件模块加载到主路由器插座时,它将显示一个带有两个路由选项卡和内部配置文件的页面。模块我定义了以下子路由

const ROUTES: Routes = [
    {
        path: '', component: ProfileComponent,
        children: [
            { path: 'subPath1', loadChildren: '../subModule1/subModule1.module#SubModule1Module' },
            { path: 'subPath2', loadChildren: '../subModule2/subModule2.module#SubModule2Module' },
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(ROUTES),
     ....
    ]
}

在profile.template内部我有像这样定义的路由选项卡

<nav md-tab-nav-bar>
          <a class="tab-label" md-tab-link [routerLink]="'subPath1'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
            Sub path 1
          </a>
          <a class="tab-label" md-tab-link [routerLink]="'subPath2'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
            Sub path 2
          </a>
        </nav>
      <router-outlet></router-outlet>

当我路线时to / user /:id / subPath2我希望将subModule2加载到md-tab-nav-bar的路由器插座中,而是将其加载到主应用路由器插座中。这将关闭profile.component并仅显示子模块2,而不是在选项卡中显示它。

知道为什么这不适用于延迟加载模块吗?

1 个答案:

答案 0 :(得分:1)

在Angular2 RouterModule

  

forChild 会创建一个包含所有指令和给定路由的模块,但不包括路由器服务

     

forRoot 创建一个模块,其中包含所有指令,给定路由,和路由器服务本身

我认为你最常使用forRoot,因为forChild只获得孩子

 RouterModule.forRoot(ROUTES)