angular - ion-fab-list on open, on close 事件

Question

你好，我希望你能帮我解决这个问题。

我正在使用 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 何时打开和关闭。

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