angular - 按下按钮时 Ionic2 关闭 fab 菜单

Question

如何在按下菜单中的按钮时关闭打开的 FAB 菜单？

这是我的按钮。

<ion-fab bottom center >
<button ion-fab><b>Hello</b></button>
<ion-fab-list side="top">
<button ion-fab (click)="refresh()"><ion-icon name="refresh"></ion-icon></button>

我必须向 refresh 添加什么才能关闭整个 FAB？我能以某种方式从代码中引用 html 对象吗？类似于 iOS 处理其导出的方式？

Answer 1

只需将#fab 添加到ion-fab 标签即可:

<ion-fab bottom center #fab>
    <button ion-fab (click)="refresh(fab)"> 
        <ion-icon name="refresh"></ion-icon>       
    </button>
</ion-fab>

并使用 FabContainer 方法 close() 在 FAB 按钮调用的任何函数开始时关闭 FAB 菜单(如果打开)，例如:

import { FabContainer } from 'ionic-angular';

// remember to pass the fab from client side
refresh(fab?: FabContainer): void {
    if (fab !== undefined) {
      fab.close();
    }
    (other function stuff...)
}