angular - ion-fab-list 打开时，关闭时事件

嗨，我希望你能帮我这个忙。

我正在使用 Ionic 2，我想要控制 ion-fab，这是 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>

我想知道的是 ion-fab-list 何时被打开和关闭。

答案＃1

看起来 Ionic 并没有提供用于监听这些事件的 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...');
    }
}