在ionic4中創建動態標簽時出錯

Question

我正在制作一個離子演示項目，並希望創建一個動態選項卡以及動態添加的選項卡路線。 以下是我的源代碼，在此代碼中，動態創建了選項卡，但選項卡的路由不起作用。

tabs.page.html

<ion-tabs  appSwipetab (ionTabsDidChange)="ionTabsDidChange($event)" (tabChange)="onTabChange($event)" #myTabs>

  <ion-tab-bar slot="bottom" color="tertiary">
    <ion-tab-button routerDirection='root' *ngFor="let tab of tabs" [tab]="tab.root">
        <ion-icon [name]="tab.name"></ion-icon>
        <ion-label>{{tab.title}}</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

在tabs.page.ts中，我設置了靜態選項卡和root。對於root的工作，我必須在tabs.router.module.ts中添加root。 我想這將是動態的。

tabs.page.ts

import { Component, ViewChild } from '@angular/core';
import { IonTabs } from '@ionic/angular';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})

export class TabsPage {

  public tabs;

  constructor() {
   this.tabs = [
    { title: "Schedule", root: 'tab1', name: "calendar" },
    { title: "Speakers", root: 'tab2', name: "contacts" },
    { title: "Map", root: 'tab3', name: "map" },
    { title: "About", root: 'about', name: "person" },

  ];
  }


}

tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: 'about',
        children: [
          {
            path: '',
            loadChildren: '../about/about.module#AboutPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

Answer 1

請遵循以下代碼module.ts

  import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TabComponent } from './tab.component';
import { TabRoutes } from './tab.routing';


@NgModule({
  imports: [

    RouterModule.forChild(TabRoutes)

  ],
  declarations: [ TabComponent ]
})

export class TabModule {}

Tab.routing.module.ts

從“ @ angular / router”導入{路由}；

import { TabComponent } from './tab.component';

export const TabRoutes: Routes = [{
    path: '', 
    redirectTo: 'tab', 
    pathMatch: 'full' 
},
{
    path: 'tab',
    component:TabComponent
  }];