離子晶圓廠名單公開，關閉事件

Question

嗨，我希望你能幫助我。

I'm使用離子2，我想對控制離子工廠，這是HTML結構：

<ion-fab left bottom> 
    <button ion-fab mini> 
    <ion-icon name="add"></ion-icon> 
    </button> 
    <ion-fab-list side="top"> 
    <button ion-fab (tap)="changeMap('SATELLITE')"> 
     <ion-icon name="map"></ion-icon> 
     <div class="label-map">Satellite</div> 
    </button> 
    <button ion-fab (tap)="changeMap('HYBRID')"> 
     <ion-icon name="map-map"></ion-icon> 
     <div class="label-map">Hybrid</div> 
    </button> 
    <button ion-fab (tap)="changeMap('NONE')"> 
     <ion-icon name="map-map"> </ion-icon> 
     <div class="label-map">None</div> 
    </button> 
    </ion-fab-list> 
</ion-fab> 

我要的是知道什麼時候是離子晶圓廠列表打開，關閉。

Answer 1

好像離子不能提供一個API來聽那些事，但是你可以很容易地添加這樣的：

<ion-fab left bottom> <!-- Bind the click event here --> 
    <button (tap)="fabToggled()" ion-fab mini> 
    <ion-icon name="add"></ion-icon> 
    </button> 
    <ion-fab-list side="top"> 
    <button ion-fab (tap)="changeMap('SATELLITE')"> 
     <ion-icon name="map"></ion-icon> 
     <div class="label-map">Satellite</div> 
    </button> 
    <button ion-fab (tap)="changeMap('HYBRID')"> 
     <ion-icon name="map-map"></ion-icon> 
     <div class="label-map">Hybrid</div> 
    </button> 
    <button ion-fab (tap)="changeMap('NONE')"> 
     <ion-icon name="map-map"> </ion-icon> 
     <div class="label-map">None</div> 
    </button> 
    </ion-fab-list> 
</ion-fab> 

然後在您的組件代碼，添加以下內容：

// It's closed by default 
private isOpened: boolean = false; 

public fabToggled(): void { 
    this.isOpened = !this.isOpened; 

    if(this.isOpened) { 
     console.log('Opened...'); 
    } else { 
     console.log('Closed...'); 
    } 
}