Ionic/Angular2中动态关闭循环生成的FAB组件方法问询

嘿，这个循环生成FAB没法关闭的问题我太熟了！之前做项目的时候也踩过这个坑，给你几个实用的解决办法：

方法一：直接在循环中传递FAB模板引用 #

虽然是用*ngFor动态生成的FAB，但你依然可以用模板引用变量（#fab）来绑定每个独立的FAB实例，然后在点击事件里直接把当前的fab传进方法里就行，这是最直接省心的方案：

<ion-item *ngFor="let e of elements">
  <ion-fab top right #fab>
    <button ion-fab mini><ion-icon name="more"></ion-icon></button>
    <ion-fab-list side="bottom">
      <!-- 把当前循环项的fab实例和元素e一起传给点击方法 -->
      <button ion-fab (click)="handleFabClick(fab, e)"><ion-icon name='create'></ion-icon></button>
    </ion-fab-list>
  </ion-fab>
</ion-item>

然后在组件的TS文件里，接收这个fab实例并调用它的close()方法：

handleFabClick(fab: any, element: any) {
  // 先处理你的业务逻辑，比如修改element的数据
  console.log('正在操作元素:', element);
  // 关闭当前点击的FAB下拉菜单
  fab.close();
}

每个循环生成的FAB都是独立的实例，这样操作不会影响其他FAB，完美适配动态生成的场景。

方法二：用ViewChildren批量获取FAB实例 #

要是你不想在模板里直接传fab实例，也可以用Angular的ViewChildren来获取页面上所有的FAB组件，再通过元素的唯一标识（比如element的ID）找到对应的FAB并关闭：

首先在组件TS里引入并注入ViewChildren：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { FabContainer } from 'ionic-angular';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  @ViewChildren(FabContainer) fabComponents: QueryList<FabContainer>;
  elements = [/* 你的元素数组，每个元素最好带唯一id */];

  handleFabClick(element: any) {
    // 先处理业务逻辑
    console.log('操作元素:', element);
    // 根据元素id匹配对应的FAB
    const targetFab = this.fabComponents.find(fab => {
      // 这里需要模板里给FAB绑定data-id属性，和element的id对应
      return fab._elementRef.nativeElement.getAttribute('data-id') === element.id;
    });
    // 找到后关闭FAB
    if (targetFab) {
      targetFab.close();
    }
  }
}

对应的模板要给每个FAB加上标识属性：

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

这个方法适合需要批量操作FAB的场景，比如一键关闭所有FAB菜单。

方法三：DOM查找应急方案（不推荐） #

如果上面两种方法都不符合你的需求，也可以通过事件冒泡向上查找父级的ion-fab元素，再获取它的组件实例来关闭。不过这个方法依赖DOM结构，一旦Ionic更新组件结构可能会失效，所以只建议应急用：

handleFabClick(event: Event, element: any) {
  // 处理业务逻辑
  console.log('操作元素:', element);
  // 向上查找最近的ion-fab元素
  const fabElement = (event.target as HTMLElement).closest('ion-fab');
  if (fabElement) {
    // 获取FAB的组件实例并关闭
    const fabInstance = fabElement['componentInstance'];
    fabInstance.close();
  }
}

模板里要传递$event对象：

<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)="handleFabClick($event, e)"><ion-icon name='create'></ion-icon></button>
    </ion-fab-list>
  </ion-fab>
</ion-item>

内容的提问来源于stack exchange，提问作者Luca C.