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

问题描述：

我正在考虑创建一个功能来隐藏和显示Angular 2 Apps中的组件。我曾考虑过使用*ngIf或ngClass这样做，但是，编写代码会很乏味。我现在正在考虑创建一个访问DOM的服务，并且能够在全球范围内显示和隐藏组件。如何使用Angular 2中的服务访问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')

是否有可能这样做使用本地角2，而不使用纯JavaScript还是jQuery？

这是'angular {Js/2}'的整点。不要处理...逻辑（组件/服务）中的DOM逻辑。如果您想操纵DOM，请在指令中执行。但是，如果您想感觉错误，请操纵DOM。 – Maxime

我知道这一点。但我正在考虑更好更有效的方式。 – ljieyao

答

当然，角度可以。但是，你试图做的是不正确的方式来处理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

'ng-show'用于angularJs，而不是angular2。 – Maxime

如果我有超过10个组件，这不会起作用... – ljieyao

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

相关推荐