如何在 Angular 中创建和传递唯一的模板引用变量？答案

【问题标题】：How to create and pass unique template reference variable in Angular?如何在 Angular 中创建和传递唯一的模板引用变量？
【发布时间】：2020-11-29 16:55:50
【问题描述】：

我有一个场景，我需要将 kendo-popup 添加到我的数组中的每个元素，问题是 kendo-popup 将“anchor(parent)”作为输入来显示弹出窗口。下面是示例代码。

  <span #anchor{{index}} *ngFor="let route of breadcrumbs;index as index;" class="item" (click)="executeAction(route)">
    <span >{{route.label}}</span>
    <span (click)="openPopup($event)"> <i class="fa fa-arrow-down"></i> </span>
    <kendo-popup [anchor]="anchor{{index}}" [open]="popupOpen" (closePopup)="close()" position="fixed"></kendo-popup>

如您所见，我想创建模板引用变量并将其作为 ["anchor0", "anchor1"] 传递给 kendo-popup。但是上面的代码不起作用。我也尝试了一些其他技术，但还没有任何帮助。有人可以帮忙吗？提前致谢。

【问题讨论】：

这里为什么需要一个模板引用，你已经有了索引，直接传过去吧。
锚点的输入是 ElementRef 对象。我可以通过使用模板引用变量来获得。
您是否尝试过将面包屑[index] 传递给锚输入
是的，但这不是元素。它只是数组中的一个值。

标签： angular kendo-angular-ui

【解决方案1】：

模板引用变量的范围仅限于定义它们的模板。结构指令创建一个嵌套模板，因此引入了一个单独的范围。

因此，您的模板引用变量已经是唯一的，因为它们位于 ngFor 嵌入式视图中。

<span #anchor *ngFor="let route of breadcrumbs;index as index;" class="item" (click)="executeAction(route)">
    <span >{{route.label}}</span>
    <span (click)="openPopup($event)"> <i class="fa fa-arrow-down"></i> </span>
    <kendo-popup [anchor]="anchor" [open]="popupOpen" (closePopup)="close()" position="fixed"></kendo-popup>

【讨论】：

我什至尝试过，但没有奏效。它会在点击任何触发器时打开所有弹出窗口。
这实际上是有效的，但我无法抓住它，因为我使用一个公共变量来打开弹出窗口，即：popupOpen。它触发了所有弹出窗口的打开和关闭。因此，它欺骗了我的想法，它不起作用。修复此变量问题后，它起作用了。谢谢。 :)