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

Question

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

<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 列处得到了插值 ({{}})

有谁知道如何修复它？

Answer 1

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

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

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

Answer 3

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

解决方案1：

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

解决方案2：

创建一个属性指令，您可以在其中将 id 作为 @Input 传递并在构造函数（）中访问 elementRef。