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

Question

我已在此处阅读了一些答案，例如this，但我的问题略有不同。我想将组件作为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并可以使用@joshrathke提到的this.sidenav.nativeElement

或（对于其他用例）

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

我对您喜欢的问题的回答还提到了这个read参数https://stackoverflow.com/a/35209681/217408

Answer 2

修改

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

原始答案

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

console.log(this.sidenav.nativeElement);