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

Question

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

应用程序

 - 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 {}

应用-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 {}

制表符-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 选项卡 https://material.io/components/tabs# 的导航系统。每个选项卡将加载内联不同的组件。因此选项卡 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 路线。module.ts 您再次声明一条 tab1 路线用 section1 children。所以现在你真正拥有的是 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 {}

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

Using Angular Router to load a component within a component

javascript

angular

angular-router