获取DOM元素，它是Angular中的一个组件

Question

我已经在这里读了一些答案，比如这个 ，但我的问题略有不同。 我想将组件作为DOM元素，以便我可以在其上添加/删除一些CSS类。

我的HTML模板包含组件：

<sidenav-menu #sidenav class="app__sidenav"></sidenav-menu>

我的类包含对它的引用：

@ViewChild('sidenav') sidenav: ElementRef;

但是当我在我的一个函数中记录this.sidenav时，我发现它是一个Sidenav组件类的表示，而不是它的DOM表示。 为什么会这样？

Answer 1

您可以使用read参数指定所需内容：

@ViewChild('sidenav', {read: ElementRef}) sidenav: ElementRef;

这样你就得到了ElementRef并且可以使用像this.sidenav.nativeElement提到的this.sidenav.nativeElement

或（对于其他用例）

@ViewChild('sidenav', {read: ViewContainerRef}) sidenav: ElementRef;

我的回答对你喜欢的问题也提到了这一点read参数https://stackoverflow.com/a/35209681/217408

Answer 2

编辑

为了实现这一点，您需要实现@GünterZöchbauer建议，使用ViewChild read组件。

原始答案

您需要使用ElementRef对象的nativeElement属性。 你会在那里找到你的DOM表示。 它也暴露了DOM元素，并允许您在其上调用传统方法，就好像它是vanilla javascript或jQuery中的DOM元素一样。

console.log(this.sidenav.nativeElement);