离子晶圆厂名单公开，关闭事件

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...'); 
    } 
}