Question

我正在尝试在ionic Angular中延迟加载组件，并且我已经找到了(../app/buildings/:buildingId)的路线，以便在导航到它时不会抛出错误，但是它并没有加载适当的组件。

我认为它是默认的父项，但是我不知道如何解决它。我已经尝试了一些方法（不是延迟加载/将其全部放入app.module中），但是我似乎无法修理它。任何帮助表示赞赏。

tabs.router.module.ts

 {
    path: 'app',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'buildings',
        children: [
          {
            path: '',
            component: Tab2Page,
            resolve: {buildings: BuildingResolverService},
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        ...

tab2.module.ts

export const tab2Routes: Routes = [
  {
    path: ':buildingId',
    component: BuildingComponent
  }
];
@NgModule({
  exports: [RouterModule],
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild(tab2Routes)
  ],
  declarations: [
    BuildingComponent
  ]
})
export class Tab2PageModule {}

转到/buildings会加载正确的组件，而/buildings/1则不会。我希望第二条路线也能做到这一点，我认为它默认为第一条路线，因为那也可能匹配吗？如果是这种情况，我不确定如何解决。

我希望我已经足够清楚

Answer 1

您的tab2Routes应该将路由''作为默认Tab2Component，将:buildingId作为BuildingComponent（如您已经拥有的）：

export const tab2Routes: Routes = [
  { 
    path: '', 
    component: Tab2Page 
  },
  {
    path: ':buildingId',
    component: BuildingComponent
  }
];

Answer 2

Ionic中的Lazyload与标准的Angular项目相比安静。离子页面系统会自动设置延迟加载。您可以找到更多信息here。

如何修复不在Angular Ionic中加载的组件

2 个答案: