使用 Angular Router 在组件中加载组件

Question

我正在使用 Ionic 框架 (v5) 并实现 Angular Router 来加载具有以下结构的应用程序。

应用程序

 - Tabs
 -- Tab 1
 -- Tab 2
 -- Tab 3

这是一个样板模板，您可以选择为您设置 Ionic。因此，使用下面的 Angular 路由器设置，此导航可以正常工作。

app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, BrowserAnimationsModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } //     { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.module.ts

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

tabs-routing.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab3/tab3.module').then(m => m.Tab3PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

我要做的是在每个选项卡中引入一个二级菜单，该菜单使用类似于 Material Tabs https://material.io/components/tabs# 的导航系统。每个选项卡都会内联加载不同的组件。所以 Tab 1 将保持活动状态，并继续允许用户在第 1、2 或 3 部分之间切换。

应用程序

 - Tabs
 -- Tab 1
 --- Section 1
 --- Section 2
 --- Section 3
 -- Tab 2
 --- Section 1
 --- Section 2
 --- Section 3
 -- Tab 3
 --- Section 1
 --- Section 2
 --- Section 3

这就是我目前所拥有的

tab1.module.ts

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }]),
    MaterialModule,
    Tab1PageRoutingModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

tab1-routing.module.ts

const routes: Routes = [
  {
    path: 'tab1',
    component: Tab1Page,
    children: [
      {
        path: 'section1',
        children: [
          {
            path: '',
            loadChildren: () =>
            import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
          }
        ]             
      },
      {
        path: 'section2',
        children: [
          {
            path: '',
            loadChildren: () =>
            import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
          }
        ]     
      },
      {
        path: 'section3',
        children: [
          {
            path: '',
            loadChildren: () =>
            import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
          }
        ]     
      },
      {
        path: '',
        redirectTo: '/tabs/tab1/section1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1/section1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Tab1PageRoutingModule {}

但是当我尝试从 /tabs/tab1 路由导航到 /section1 时，它会显示错误消息

Error: Cannot match any routes. URL Segment: 'section1'

Answer 1

您已经在 tabs-routing.module.ts 和 tab1-routing.module.ts 中有一个 tab1 路由，您再次声明了一个带有 section1 子级的 tab1 路由。所以现在你真正拥有的是tabs/tab1/tab1/section1。然后在 tab1-routing.module.ts 中，您将从 '' 重定向到不存在的 /tabs/tab1/section1。您需要将 tab1-routing.module.ts 中的'' 路由重定向更改为：

{
  path: '',
  redirectTo: '/tabs/tab1/tab1/section1',
  pathMatch: 'full'
}

另请注意，在 tab1.module.ts 中，您要导入两个路由器模块。这可能会导致一些奇怪的结果。

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }]), //<- here
    MaterialModule,
    Tab1PageRoutingModule // <- and here
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}