在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

请遵循以下代码模块。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
  }];