Блог

Как добавить динамические вкладки в 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" },

  ];
  }


}