ionic-framework - 有没有办法读取 Ion-Segment 值以将它们传递给 Ion-Fab 以根据 SwitchCase 运行不同的功能？

Question

我目前有一个带有两个 switchCases 的 Ion-Segment。即管理与市场。但是，我想包含一个 FAB 按钮，以根据用户所在的 SwitchCase 运行不同的功能。

我已经尝试将 FAB 放置在 SwitchCase 选项中，但是 FAB 似乎在页面上滚动而不是停留在页面上。

晶圆厂应针对不同的开关盒运行不同的功能。

//段代码

    <ion-header>
        <ion-segment [(ngModel)]="options" color="grey">
            <ion-segment-button value="Management">
                Management
            </ion-segment-button>
            <ion-segment-button value="Market">
                Crop Market
            </ion-segment-button>
        </ion-segment>
    </ion-header>

//CODE FOR IMPLEMENTATION OF THE SEGMENT

    <ion-content>
    <div [ngSwitch]="options" class="management-class"> //FIRST SWITCH CASE
    <div *ngSwitchCase="'Management'">
    <//MANAGEMENT CONTENT FOR THIS SWITCH CASE>
    </div>
    </div>

    <div [ngSwitch]="options" class="management-class">//SECOND SWITCH CASE
    <div *ngSwitchCase="'Market'">
    <//MARKET CONTENT FOR THIS SWITCH CASE>
    </div>
    </div>

    //This is the ion-fab button to that switches functions based on the users current switch case.

    <ion-fab right bottom>
        <button *ngIf="this.options=Market" ion-fab (click)="addToMarket()" color="primary" mini><img src="assets/imgs/add1.png"></button>
        <button *ngIf="this.options=Management" ion-fab (click)="plantNew()" color="primary" mini><img src="assets/imgs/add1.png"></button>
    </ion-fab>

</ion-content>

Answer 1

在您的片段上使用 ionChange 事件，例如:

<ion-segment (ionChange)="segmentChanged($event)">
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
    <ion-segment-button value="enemies">
      <ion-label>Enemies</ion-label>
    </ion-segment-button>
  </ion-segment>

在你的 component.ts 中

segmentChanged(e){
    console.log(e.detail.value)
    this.segmentValue = e.detail.value;
}

改变你的值(value)观:

<ion-fab right bottom>
        <button *ngIf="segmentValue == 'friends'" ion-fab (click)="addToMarket()" color="primary" mini><img src="assets/imgs/add1.png"></button>
        <button *ngIf="segmentValue == 'enemies'" ion-fab (click)="plantNew()" color="primary" mini><img src="assets/imgs/add1.png"></button>
    </ion-fab>