如何在离子中创建动态选项卡

Question

如何在ionic-4中添加动态选项卡。要动态添加选项卡有效，但选项卡[root]不起作用。我必须在tabs.router.module.ts中提供路由，我想动态添加选项卡的路由。请帮助我如何在ionic-4中使用动态制表符路由。

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

import { Component, ViewChild } from '@angular/core';
import { IonTabs } from '@ionic/angular';
import { SwipeTabDirective } from '../directives/swipe-tab.directive';

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

export class TabsPage {
  @ViewChild(SwipeTabDirective) swipeTabDirective: SwipeTabDirective;
  @ViewChild('myTabs') tabRef: IonTabs;
  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" },

  ];
  }


}