按下按钮时，Ionic2关闭工厂菜单答案

【问题标题】：Ionic2 close fab menu when button pressed按下按钮时，Ionic2关闭工厂菜单
【发布时间】：2017-04-30 06:05:56
【问题描述】：

按下菜单中的按钮时如何关闭打开的 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 处理其出口的方式？

【问题讨论】：

标签： angular ionic2 floating-action-button

【解决方案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...)
}

【讨论】：

太棒了！ FabContainer 定义在哪里/我从哪个模块导入它？ API 文档很稀少？
FabContainer 在ionic-angular 中（我更新了我的答案）。是的，API 文档仍然没有涵盖所有内容。抱歉，我忘了我在哪里找到了这个技巧，可能是在一些教程中。
实际上它被埋在了 cmets 中，但没有 import
不应该在函数调用中传入fabcontainer吗？ (click)="refresh(fab)"

【解决方案2】：

在没有.ts函数的html文件中关闭FAB；你可以在 html 标签中使用fab.close()：

<ion-fab bottom left  #fab>
  <ion-fab-list side="top">
    <button [navPush]="cart" (click)="fab.close()" *ngIf="loggedIn" ion-fab>
  </ion-fab-list>
</ion-fab>

它是如此简单，你也可以为单个事件使用多个函数（例如(click)事件）：

      <button *ngIf="loggedIn" (click)="logout()" (click)="fab.close()" ion-fab>

不要在标签中伪造#fab：<ion-fab #fab>

【讨论】：

【解决方案3】：

对于仅使用此解决方案的新版本（我知道，我知道，超时...）：

TS：

@ViewChild('fab') _fab: IonFab;

public closeFab(){
    let t = setTimeout(() => {
        this._fabRight.close();
    }, 100);

}

HTML：

<ion-fab vertical="bottom" horizontal="end" #fab>
<ion-fab-button color="secondary">
    <ion-icon name="eye"></ion-icon>
</ion-fab-button>
<ion-fab-list side="start">
    <ion-fab-button (click)="closeFab()">
        <ion-icon name="add"></ion-icon>
    </ion-fab-button>
</ion-fab-list>
</ion-fab>

【讨论】：