Angular2将类添加到body标签答案

【问题标题】：Angular2 add class to body tagAngular2将类添加到body标签
【发布时间】：2017-09-18 10:28:30
【问题描述】：

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

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

Angular 2.x bind class on body tag

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

我的用例是这样的：

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

【问题讨论】：

实际上，如果您在 html 页面中使用 js，使用 document.body.className|classList 有什么问题？
哈哈，要是这么简单就好了 :) 但是直接访问 dom 是个坏习惯
您可以编写一个大包装器，该包装器将在几秒钟内执行，最后将class 添加到body。如果你不打算使用服务器渲染或 Web Worker，你害怕什么？
那么没有比这更好的解决方案了吗？
我无法理解这些无缘无故投票和关闭问题的辱骂者

标签： angular

【解决方案1】：

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

注入全局文档。好吧，这可能不是最佳实践，因为我不知道 nativescript 等是否支持它。但至少比使用纯 JS 好。

构造函数（@Inject（DOCUMENT）私有文档：文档）{} ngOnInit(){ this.document.body.classList.add('test'); }

嗯，也许更好。您可以注入渲染器或渲染器 2（在 NG4 上）并使用渲染器添加类。

导出类 myModalComponent 实现 OnDestroy { 构造函数（私有渲染器：渲染器）{ this.renderer.setElementClass(document.body, 'modal-open', true); } ngOnDestroy() { this.renderer.setElementClass(document.body, 'modal-open', false); }

为 ANGULAR4 编辑：

从'@angular/core'导入{组件，OnDestroy，Renderer2}；导出类 myModalComponent 实现 OnDestroy { 构造函数（私有渲染器：Renderer2）{ this.renderer.addClass(document.body, 'modal-open'); } ngOnDestroy() { this.renderer.removeClass(document.body, 'modal-open'); }

【讨论】：

感谢回复，我认为使用渲染器是最好的解决方案
如果有人想知道从哪里获得 DOCUMENT，那就是：import { DOCUMENT } from '@angular/platform-browser'
渲染器解决方案要好得多。在 Angular 4 中，Renderer 已被弃用，取而代之的是 Renderer2。代码必须更改为：this.renderer.addClass(document.body, 'modal-open'); 和 this.renderer.removeClass(document.body, 'modal-open');
另外，构造函数中不再需要@Inject(DOCUMENT)
作为@Neph 的更新：不推荐从平台浏览器导入文档。请改用@angular/common。

【解决方案2】：

我认为最好的方法是上面 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');
    }
}

【讨论】：

谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢：）
这非常适合为 body 元素添加深色主题类！