如何获取angular中的元素引用名称 8

Question

尝试获取元素引用名称但未获取working.If任何知道的人请帮助找到解决方案。

alert 应该像 container.Because 那是元素引用。

app.component.html:

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

app.component.ts:

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

Answer 1

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

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

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

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

Note however that #container in your div element is an Angular template reference variable that is commonly used together with a @ViewChild decorator.

如何获取angular中的元素引用名称 8

How to get element reference name in angular 8

typescript

angular5

angular7

angular8