angular - 获取作为 Angular 组件的 DOM 元素

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 并且可以使用 this.sidenav.nativeElement 就像@joshrathke 提到的那样

或(对于其他用例)

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

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