如何在角度 8 中获取元素引用名称答案

【问题标题】：How to get element reference name in angular 8如何在角度 8 中获取元素引用名称
【发布时间】：2020-02-02 19:30:25
【问题描述】：

试图获取元素引用名称但不起作用。如果有人知道，请帮助找到解决方案。

alert 应该像容器。因为那是元素引用。

app.component.html：

<div (click)="test(event)" #container></div>

app.component.ts：

test(e){
   alert(e.elementRef);
   //Output should be like alert("container");
}

【问题讨论】：

如果你想获取事件数据，你必须正确传递它(click)="test($event)" 而不是test(event) 但在这种情况下，我们没有elementRef

【解决方案1】：

正如Kamil Augustyniak 在他的评论中所写，在你的div 元素中使用$event 而不是event。

<div (click)="test($event)" #container></div>

组件类中的test 方法将使用MouseEvent 调用，您可以从其target、srcElement 或currentTarget 属性（取决于浏览器）获取对HTML 元素的引用。

test(event: MouseEvent): void {
   const htmlElement = event.target || event.srcElement || event.currentTarget;;
   ...
}

但是请注意，div 元素中的 #container 是 Angular 模板引用通常与 @ViewChild 装饰器一起使用的变量。

【讨论】：

@Nila Vaani：它适用于您问题中发布的原生 HTML div 元素。但是，在您的 StackBlitz 中，您尝试使其与自定义组件一起使用。因此，您需要一种不同的方法。也许您可以简单地将选项卡名称传递给test 方法。请告诉我们更多关于您的具体用例。
我要获取选中标签的元素引用名，如何获取？
在您的 StackBlitz 中：在您的 test 方法中，去掉当前代码并添加 console.log(event.data.title)。
Yes..title 和 id 我们可以得到但是是否有可能得到模板元素引用名称？
@Nila Vaani：我认为这是不可能的。 Angular 在编译时使用它，而不是保存在 DOM 中。