如何在 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。 但是上面的代碼不起作用。 我也嘗試了一些其他技術，但還沒有任何幫助。 有人可以幫忙嗎？ 提前致謝。

Answer 1

模板引用變量的范圍僅限於定義它們的模板。結構指令創建一個嵌套模板，因此引入了一個單獨的 scope。

因此，您的模板引用變量已經是唯一的，因為它們位於 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>