Angular2将类添加到body标签中

Question

我如何将 class 添加到 body 标签中，而无需制作 body 作为应用程序选择器并使用主机绑定？

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

Angular 2.x绑定体标签

我正在使用一个大Angular2应用程序，更改根选择器将影响很多代码，我将不得不更改大量代码

我的用例是：

当我打开模态组件(动态创建(时，我希望文档scrollbar隐藏

Answer 1

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

1. 注入全局文档。好吧，这可能不是最好的做法，因为我不知道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');
  }
}

Answer 2

我认为最好的方法是上述丹尼斯的两种方法的组合：使用渲染器实际设置/删除类，但也使用文档注射器，因此不强烈依赖于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');
    }
}