Angular 角动力学#

在Angular中，您可以使用#标识如下所示的指令：

<div #actualTarget></div>

<div #{{l + '-' + n}}></div>

我需要使我的动态如下：

<div #actualTarget></div>

<div #{{l + '-' + n}}></div>

正确的方法是什么

 <div class="list-cont shadow" *ngFor="let cat of categories; let l = index">
 ...
  <ul class="responder" *ngFor="let responder of cat.bidderResponses; let n = index">

   <li>
    #
   </li>
  </ul>
 </div>

...


#

角度模板语法中没有动态参考变量

在像

ngFor

这样的结构化指令中，模板嵌套在单独的作用域中。 因此，您可以轻松地使用它，如：

...

模板引用变量通常是对DOM元素的引用 在模板中。它还可以引用指令（其中包含 组件）、元素、TemplateRef或web组件

您可以使用decorator将变量传递给指令，并在指令内部执行一些验证

应用程序组件.ts

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
颜色：字符串[]=[
“黄色”，
“蓝色”，
“红色”，
“灰色”
]
}

app.component.html

{{{color}

突出显示.directive.ts

import{Directive，ElementRef，HostListener，Input}来自“@angular/core”；
@指示({
选择器：“[appHighlight]”
})
导出类highlight指令{
构造函数（私有el:ElementRef）{}
@Input（）highlightColor:字符串
@HostListener（'mouseenter'）onMouseEnter（）{
this.highlight（this.highlightColor）；
}
@HostListener（'mouseleave'）onMouseLeave（）{
此项。突出显示（空）；
}
私人突出显示（颜色：字符串）{
this.el.nativeElement.style.backgroundColor=颜色；
}
}

工作示例

在angular Githup中还有一个悬而未决的问题，以及在组件声明中向宿主元素添加指令的解决方法：

---

也许你可以更准确地解释你想做什么。

为什么你想让它成为动态的？因为它在几个动态构建元素的循环中。你可以展示这些循环以及你想如何使用模板引用变量吗？我怀疑你是否需要他们的活力。您可能可以使用

#actual target

。我在上面添加了更多代码。我没有看到带有模板引用变量的

div

，您能显示它吗？你会怎么处理它？为什么不直接使用

#actualTarget

？使for循环中生成的每个元素都具有相同的引用变量？是的，但它将在一个单独的范围内，因此不会有冲突。你应该解释你的目标，因为我认为你对你的问题使用了错误的模式。