角度2 将类添加到正文标签

Question

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

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

body标记上的Angular 2.x绑定类

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

我的用例是：

当我打开一个模态组件(动态创建)时，我想隐藏文档滚动条

Answer 1

我认为最好的方法是结合上面DaniS的两种方法：使用渲染器来实际设置/删除类，但也使用文档注入器，因此它不强烈依赖于windows. 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');
    }
}

Answer 2

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

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);
  }
}

编辑角度4：

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');
  }
}