如何以编程方式关闭活动离子制造厂列表容器

Question

在这里的文档中，它表明我可以使用close()来"关闭活动的FAB列表容器"，但是我该如何将其集成到我的typescript文件中呢？即，我必须导入什么以及如何引用FAB按钮？

Answer 1

您可以使用viewchild来触发它，如下所示：

在html文件上

<ion-fab vertical="center" horizontal="center" slot="fixed" #fab>
<ion-fab-button>
<ion-icon name="share"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom">
<ion-fab-button
><ion-icon name="logo-facebook"></ion-icon
></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button
><ion-icon name="logo-instagram"></ion-icon
></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-button (click)="onClose()"> close</ion-button>

在ts文件上

@ViewChild('fab') fab: IonFab;
constructor() {}
onClose() {
this.fab.close();
}

这里是工作样品