如何使用 Angular 2 中的服务访问 DOM？答案

【问题标题】：How can I access DOM using service in Angular 2?如何使用 Angular 2 中的服务访问 DOM？
【发布时间】：2016-11-30 19:44:59
【问题描述】：

我正在考虑创建一个功能来隐藏和显示 Angular 2 应用程序中的组件。我曾考虑过使用*ngIf 或ngClass 这样做，但是，这对于编写代码来说会很乏味。我现在正在考虑创建一个服务来访问 DOM 并能够在全球范围内显示和隐藏组件。

例如，我的 DOM 如下

<my-component-1></my-component-1>
<my-component-2></my-component-2>
<my-component-3></my-component-3>
<my-component-4></my-component-4>

我想有如下服务功能

DomService.show('my-component-1')

是否可以在不使用纯 javascript 或 jQuery 的情况下使用原生 angular 2 来做到这一点？

【问题讨论】：

这是angular{Js/2} 的重点。不要在你的......逻辑（组件/服务）中处理 DOM 逻辑。如果要操作 DOM，请在指令中执行。但是按照自己的意愿操作 DOM 感觉是错误的。
我知道这一点。但我正在考虑更好、更有效的方法。

标签： jquery angular dom

【解决方案1】：

当然，angular可以。但是，您尝试做的不是使用 angularjs 的正确方法。因为，angularjs 是与 DOM 绑定数据的。

<my-component-1 ng-show="isHidden"></my-component-1>
<my-component-2 ng-show="isHidden"></my-component-2>
<my-component-3 ng-show="isHidden"></my-component-3>
<my-component-4 ng-show="isHidden"></my-component-4>

当你改变 isHidden 的值时，它会立即影响 DOM。

Official Document

【讨论】：