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

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

Ionic 中的延迟加载与标准 Angular 项目完全不同。离子页面系统会自动设置延迟加载。您可以找到更多信息 here.

Answer 2

你的 tab2Routes 应该有路线 '' 作为你的默认 Tab2Component 和 :buildingId 作为 BuildingComponent （就像你已经有的那样）：

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

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

How to fix component not loading in Angular Ionic

angular-routing

ionic-framework

angular