Angular2将类添加到body标签

如何在不将主体作为应用选择器和使用主机绑定的情况下将类添加到主体标签？

我尝试使用渲染器，但它会改变整个身体

身体标签上的Angular 2.x绑定类

我正在开发一个大型angular2应用，更改根选择器会影响很多代码，我将不得不更改很多代码

我的用例是这样的：

当我打开模式组件（动态创建）时，我希望文档滚动条隐藏

我想发表评论。但是由于缺少声誉，我写了一个答案。我知道解决此问题的两种可能性。

1. 注入全局文档。嗯，这可能不是最佳做法，因为我不知道nativescript等是否支持该做法。但这至少比使用纯JS更好。

构造函数（@Inject（DOCUMENT）私有文档：文档）{}

ngOnInit（）{
   this.document.body.classList.add（'test'）;
}

好吧，也许更好。您可以注入渲染器或渲染器2（在NG4上），然后将类与渲染器一起添加。

导出类myModalComponent实现OnDestroy {

  构造函数（私有渲染器：Renderer）{
    this.renderer.setElementClass（document.body，'modal-open'，true）;
   }

  ngOnDestroy（）{
    this.renderer.setElementClass（document.body，'modal-open'，false）;
  }

编辑ANGULAR4：

从'@ angular / core'导入{Component，OnDestroy，Renderer2};

导出类myModalComponent实现OnDestroy {

  构造函数（私有渲染器：Renderer2）{
    this.renderer.addClass（document.body，'modal-open'）;
   }

  ngOnDestroy（）{
    this.renderer.removeClass（document.body，'modal-open'）;
  }

我认为最好的方法是上述DaniS的两种方法的组合：使用渲染器实际设置/删除类，但也使用文档注入器，因此它并不强烈依赖，window.document而是可以动态替换（例如，渲染服务器端时）。因此，整个代码如下所示：

import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';

@Component({ /* ... */ })
export class MyModalComponent implements OnInit, OnDestroy {
    constructor (
        @Inject(DOCUMENT) private document: Document,
        private renderer: Renderer2,
    ) { }

    ngOnInit(): void {
        this.renderer.addClass(this.document.body, 'embedded-body');
    }

    ngOnDestroy(): void {
        this.renderer.removeClass(this.document.body, 'embedded-body');
    }
}