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

Question

我有一个场景，我需要将 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。但是上面的代码不起作用。我也尝试了一些其他技术，但 none 已经有所帮助。有人可以帮忙吗？提前致谢。

Answer 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>

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

How to create and pass unique template reference variable in Angular?

angular

kendo-angular-ui