Angular2将类添加到body标签

Question

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

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

Angular 2.x在body标签上绑定类

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

我的用例是这样的:

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

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() {
    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

我想做到这一点的最好办法是由丹尼斯上述两种方法的组合:使用渲染实际设置/删除类,也使用文档进样器,所以它不是强烈依赖于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');
    }
}