Ionic 4 - 如何在一个页面上使用选项卡按钮及其内容创建选项卡布局答案

【问题标题】：Ionic 4 - How to create tabs layout with tab button and its content on one single pageIonic 4 - 如何在一个页面上使用选项卡按钮及其内容创建选项卡布局
【发布时间】：2019-12-04 09:36:47
【问题描述】：

我必须创建一个带有标签布局的页面，其中，该页面将包含动态绑定的标签栏按钮。我还需要显示正文内容，但是也将动态绑定

我已尝试使用以下给出的代码。但是会出现一个错误，显示“'ion-tab' 不是已知元素： 1. 如果 'ion-tab' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果 'ion-tab' 是 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到此组件的 '@NgModule.schemas' 以禁止显示此消息。”

 <ion-tabs *ngIf="tabList">
    <ion-tab *ngFor="let t of tabList">
        <ion-header translucent>
            <ion-toolbar>
                <ion-title>{{ t.name }}</ion-title>
            </ion-toolbar>
        </ion-header>    
        <ion-content fullscreen class="ion-padding">
            <h1>{{ t.name }}</h1>
        </ion-content>
    </ion-tab>
    <ion-tab-bar slot="top">
        <ion-tab-button *ngFor="let t of tabList" [tab]="t.name">
            <ion-label>{{ t.name }}</ion-label>
            <ion-icon name="musical-note"></ion-icon>
        </ion-tab-button>
    </ion-tab-bar>        
</ion-tabs>

【问题讨论】：

标签： angular cordova ionic-framework ionic4

【解决方案1】：

转到您的app.module.ts
在imports[]数组之后添加schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

例子：

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],

  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})

希望这能解决您的问题。谢谢

【讨论】：

【解决方案2】：

Home.html

<ion-tabs>
<ion-tab-bar slot="bottom">
  <ion-tab-button tab="tab1">\\ tab1 Your page name
    <ion-icon name="calendar"></ion-icon>
    <ion-label>Schedule</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="tab2">\\ tab2 Your page name
    <ion-icon name="contacts"></ion-icon>
    <ion-label>Speakers</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="tab3">\\ tab3 Your page name
    <ion-icon name="map"></ion-icon>
    <ion-label>Map</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="tab4"> \\ tab4 Your page name
    <ion-icon name="information-circle"></ion-icon>
    <ion-label>About</ion-label>
  </ion-tab-button>
</ion-tab-bar>

Home.module.ts

 const routes: Routes = [

{
path: 'home',
component: HomePage,
children: [
  {
    path: 'tab1',
    loadChildren: '../tab1/tab1.module#Tab1PageModule'
  },
  {
    path: '',
    redirectTo: 'home/tab1',\\default redirect to page
    pathMatch: 'full'
  }
]
 }
];

【讨论】：

【解决方案3】：

好吧，使用这样的段：

解决方案 - 1

page.ts

import { ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
.....
@ViewChild('slider') slider: IonSlides;
.....
selectedTab(index: number) {
   this.slider.slideTo(index);
}

async moveButton() {
   let index = await this.slider.getActiveIndex();
   this.page = index.toString();
   console.log("0")
}

segmentChanged(ev: any) {
   console.log('Segment changed', ev);
}

page.html

<ion-row>
    <ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="page">
      <ion-segment-button value="0" (click)="selectedTab(0)">
        <ion-label>Tab1</ion-label>
      </ion-segment-button>
      <ion-segment-button value="1" (click)="selectedTab(1)">
        <ion-label>Tab2</ion-label>
      </ion-segment-button>
      <ion-segment-button value="2" (click)="selectedTab(2)">
        <ion-label>Tab3</ion-label>
      </ion-segment-button>
      <ion-segment-button value="3" (click)="selectedTab(3)">
        <ion-label>Tab4</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-row>

  <ion-slides #slider (ionSlideWillChange)="moveButton()">
    <ion-slide>
      <h1>Tab1</h1>
    </ion-slide>
    <ion-slide>
      <h1>Tab2</h1>
    </ion-slide>
    <ion-slide>
      <h1>Tab3</h1>
    </ion-slide>
    <ion-slide>
      <h1>Tab4</h1>
    </ion-slide>
  </ion-slides>

解决方案 - 2

此外，您也可以这样做。这个例子在 ionic 3 中，但我们也可以在 ionic 4 中使用。

sliding segments

希望对你有帮助:)

【讨论】：