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

【问题标题】：Get DOM element which is a component in Angular获取 DOM 元素，它是 Angular 中的一个组件
【发布时间】：2017-08-18 15:42:08
【问题描述】：

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

我的 HTML 模板包含组件：

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

我的类包含对它的引用：

@ViewChild('sidenav') sidenav: ElementRef;

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

【问题讨论】：

标签： angular

【解决方案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

【讨论】：

@TheOpti 很高兴听到:-)
使用ngClass 指令不是更“Angular-y”的方式吗？
@DeborahK 我再次查看了这个问题，但我找不到有关实际意图的信息。你可能是对的。我只是指出了让我印象深刻的问题以及无法解决的问题。
@GünterZöchbauer 感谢您提供信息。不确定我是否只是错过了一些东西。是的......有时当没有足够的信息时，很难深入了解他们真正想要做的事情并提出替代方案，而不是仅仅回答他们的要求..

【解决方案2】：

编辑

为了使其工作，您需要实施@Günter Zöchbauer 建议，以使用ViewChild 和read 提取组件。

原答案

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

console.log(this.sidenav.nativeElement);

【讨论】：