如何使用 Angular 6 在函数中传递动态模板引用变量答案

【问题标题】：How to pass a dynamic template reference variable in a function using angular 6如何使用 Angular 6 在函数中传递动态模板引用变量
【发布时间】：2019-01-06 18:43:08
【问题描述】：

我正在尝试实现此功能但出现错误

<div *ngFor="let item of items; index as i">
    <div #menu{{i}}>
        //Some code
    </div>
    <div (onClick)="Clicked($event,menu{{i}})">
        //Some other code
    </div>

在 [Clicked($event,menu{{i}})] 中的第 19 列预期表达式出现插值 ({{}})

有人知道怎么解决吗？

【问题讨论】：

试过 (onClick)="Clicked($event,menu+i) 和 (onClick)="Clicked($event,'menu'+i) 仍然没有运气
@KeshanNageswaran 试过这个没用

标签： angular

【解决方案1】：

您可以使用返回 QueryList 的 ViewChildren 装饰器：您不再需要使用索引，Angular 会为您处理所有这些。

查看此stackblitz 以查看它的实际效果（在单击按钮之前打开您的控制台）

【讨论】：

太棒了！谢谢！

【解决方案2】：

我刚刚遇到了同样的问题，并通过引用具有模板引用变量的同一元素的唯一 ID 来解决它，我相信您也可以这样做。

<div class="outer-element" #outerElement>
  <div *ngFor="let item of items; index as i">
    <div id="menu{{i}}">
        //Some code
    </div>
    <div (onClick)="Clicked($event, outerElement.querySelector('#menu' + i)">
        //Some other code
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

动态模板引用在 Angular 中是不可行的。您可以尝试这两种解决方案。

解决方案 1：

将 'id' 属性附加到 div 元素，即 'menu1' 并通过 click 方法将 id 传递给组件并使用 document.querySelector() 访问 DOM

解决方案 2：

创建一个属性指令，您可以在其中将 id 作为@Input 传递并在 constructor() 中访问 elementRef。

【讨论】：