Angular2将类添加到body标签

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

注入全局文档。好吧，这可能不是最佳实践，因为我不知道 nativescript 等是否支持它。但至少比使用纯 JS 好。

constructor(@Inject(DOCUMENT) private document: Document) {}

ngOnInit(){
   this.document.body.classList.add('test');
}

好吧，也许甚至更好。您可以注入渲染器或渲染器 2（在 NG4 上）并使用渲染器添加类。

export class myModalComponent implements OnDestroy {

  constructor(private renderer: Renderer) {
    this.renderer.setElementClass(document.body, 'modal-open', true);
  }

  ngOnDestroy(): void {
    this.renderer.setElementClass(document.body, 'modal-open', false);
  }
}

编辑 ANGULAR4：

import { Component, OnDestroy, Renderer2 } from '@angular/core';

export class myModalComponent implements OnDestroy {

  constructor(private renderer: Renderer2) {
    this.renderer.addClass(document.body, 'modal-open');
  }

  ngOnDestroy(): void {
    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');
    }
}

---