Angular2将 class 添加到 body 标记

如何在不使用 尸体作为应用程序选择器和使用主机绑定的情况下将 同学们添加到 尸体标记中？

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

带角度的2.x 绑定主体标签类

I'm working on a big angular2 app and changing the root selector will impact a lot of code, I will have to change a lot of code

我的用例是这样的:

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

96873 次浏览
小开
最佳答案

我很乐意发表评论，但由于名声不佳，我写了一个答复。 我知道解决这个问题有两种可能性。

  1. 注入全球文件。好吧，这可能不是最佳实践，因为我不知道如果 nativescript 等支持这一点。但是它至少比使用纯 JS 要好。
constructor(@Inject(DOCUMENT) private document: Document) {}


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

Well and perhaps even better. You could inject the renderer or renderer 2 (on NG4) and add the class with the renderer.

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

编辑:

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

提交答案