【问题标题】:Lazy loading with tab router navigation使用标签路由器导航延迟加载
【发布时间】:2017-09-08 06:35:40
【问题描述】:

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

在我的 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>

当我路由时,例如到 /user/:id/subPath2 我希望 subModule2 被加载到 md-tab-nav-bar 的路由器插座中,但它被加载到主应用程序路由器插座中。这将关闭 profile.component 并仅显示 submodule2 而不是在选项卡内显示它。

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

【问题讨论】:

    标签: angular angular2-routing angular-material2


    【解决方案1】:

    在 Angular2 中 RouterModule

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

    forRoot 创建一个包含所有指令、给定路由、和路由器服务本身的模块。

    我认为你最常使用 forRoot,因为 forChild 得到唯一的孩子

     RouterModule.forRoot(ROUTES)
    

    【讨论】:

    • 谢谢,是的,这似乎是问题所在,但我需要 forChild 因为我懒加载模块。当我删除延迟加载时,它工作正常。你知道如何让延迟加载模块工作吗?
    • 我没有和lazy一起工作,但我认为你需要为孩子添加组件{ path: 'subPath1', component: ***SomeComponent*** , loadChildren: '../subModule1/subModule1.module#SubModule1Module' }
    • 非常感谢,你是对的,添加组件就可以了。我会把它标记为正确答案!
    • 很高兴你能帮上忙)
    • 同样的问题,但没有得到它的工作。实际上我没有得到需要的东西 SomeComponent
    猜你喜欢
    • 2015-03-28
    • 2022-11-03
    • 2018-12-22
    • 1970-01-01
    • 2017-05-17
    • 1970-01-01
    • 2020-05-31
    • 1970-01-01
    • 2020-05-03
    相关资源
    最近更新 更多