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

Answer 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>

当按下按钮时，Ionic2关闭fab菜单

2 个答案: