Question

如何在正文标记中添加类而不将正文作为应用选择器并使用主机绑定？

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

Angular 2.x bind class on body tag

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

我的用例是：

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

Answer 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() {
    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() {
    this.renderer.removeClass(document.body, 'modal-open');
  }

Answer 2

我认为最好的方法是上述DaniS的两种方法的组合：使用渲染器实际设置/删除类，但也使用文档注入器，因此它与{{1 }}，但可以动态替换（例如，在渲染服务器端时）。因此，整个代码将如下所示：

window.document

Angular2将类添加到body标签

2 个答案: