Angular：如何为*ngFor渲染的按钮设置不同模板引用变量？

其实你完全不需要手动给每个引用变量命名成#button1、#button2这种——Angular的*ngFor循环块本身自带独立作用域！也就是说，在循环内部定义的模板引用变量，每个循环项里的变量都是各自独立的，不会互相干扰。

你可以直接在循环里用同一个引用变量名，比如#btnTooltip="bs-tooltip"，然后绑定focus和blur事件来调用它的toggle()方法，完全不会出现多个tooltip同时触发的问题。

修改后的代码示例：

<li *ngFor="let button of buttons">
  <button 
    #btnTooltip="bs-tooltip"
    (focus)="btnTooltip.toggle()"
    (blur)="btnTooltip.toggle()"
    [tooltip]="button.tooltip"
  >
    {{button.text}}
  </button>
</li>

为什么这样可行？ #

Angular在处理*ngFor时，会为每个循环迭代创建一个独立的模板上下文。所以每个<button>里的#btnTooltip只属于当前循环项的上下文，指向的是当前按钮上的bs-tooltip指令实例，和其他循环项里的同名变量完全不冲突。

如果你之前用了同一个变量名却出现了多个tooltip同时显示的问题，大概率是因为你把变量定义在了循环外部，或者在事件处理函数里错误地引用了全局的变量。现在把引用变量放在循环内部，每个按钮的tooltip实例都是独立管控的，就不会出现这个问题了。

另外，如果你需要在组件类里处理这些tooltip实例（比如批量操作），可以通过@ViewChildren来获取所有的BsTooltipDirective实例，而不用手动命名每个变量：

import { ViewChildren, QueryList } from '@angular/core';
import { BsTooltipDirective } from 'ngx-bootstrap/tooltip'; // 假设你使用的是ngx-bootstrap的tooltip

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChildren(BsTooltipDirective) tooltips!: QueryList<BsTooltipDirective>;

  // 示例：批量关闭所有tooltip
  closeAllTooltips() {
    this.tooltips.forEach(tooltip => tooltip.hide());
  }
}

这样不管循环有多少个按钮，都能轻松管控所有的tooltip实例啦。

内容的提问来源于stack exchange，提问作者matchi