ionic / angular2 动态关闭 FAB

Question

使用 ionic 的 FABS 但在循环中，因此不能使用 id 检索组件并关闭：

<ion-item ion-item *ngFor="let e of elements">
    <ion-fab top right>
        <button ion-fab mini><ion-icon name="more"></ion-icon></button>
        <ion-fab-list side="bottom">
            <button ion-fab (click)="click(e)"><ion-icon name='create'></ion-icon></button>
        </ion-fab-list>
    </ion-fab>
</ion-item>

关闭 FAB 的标准解决方案需要 ION-FAB 上的 ID，然后可以访问外部 ION-FAB 组件并调用 .close()：

    <ion-fab top right #fab>
        <button ion-fab mini><ion-icon name="more"></ion-icon></button>
        <ion-fab-list side="bottom">
            <button ion-fab (click)="click(fab,e)"><ion-icon name='create'></ion-icon></button>
        </ion-fab-list>
    </ion-fab>

由于这些工厂是动态生成的，我无法提供 ID 并且不知道如何从内部按钮事件访问父 ION-FAB 组件，所以我如何访问父 FAB 组件以在其上调用 .close() ?

Answer 1

试试这个 HTML

<ion-fab top right *ngFor="let e of elements; let currentIndex = index;"
[style.margin-left.px]="currentIndex*45" #fabList>
        <button ion-fab mini id="{{'fab_btn'+ currentIndex}}"><ion-icon name="more"></ion-icon></button>
        <ion-fab-list side="bottom">
            <button ion-fab (click)="click(currentIndex)"><ion-icon name='create'></ion-icon></button>
        </ion-fab-list>
</ion-fab>

打字稿

import { ViewChildren, QueryList } from '@angular/core';

@ViewChildren('fabList')fabList : QueryList<FabContainer>; //Use @ViewChildren instead of @ViewChild

click(currentIndex: any) {
    //let id = 'fab_btn' + currentIndex.toString();
    //document.getElementById(id).click();
    let currentFab: FabContainer = this.fabList._results[index]; //Get current clicked FabContainer object from index 
    currentFab.close(); 
}

演示 - https://stackblitz.com/edit/ionic-fab-tab-open-niy8wg-close-dynamically-utrxfs?file=pages/home/home.ts