Angular2でbodyタグにクラスを追加する

appセレクタとしてbodyを作り、ホストバインディングを使用せずに、bodyタグにclassを追加するにはどうすればよいですか？

レンダラーを使ってみましたが、body全体が変わってしまいます。

https://stackoverflow.com/questions/34430666/angular-2-x-bind-class-on-body-tag

私は大きなangular2アプリに取り組んでおり、ルートセレクタを変更すると、多くのコードに影響します。

私のユースケースはこうです：

モーダルコンポーネント（動的に作成される）を開いたときに、ドキュメントのスクロールバーを隠したい。

Sunil Garg
編集された質問 27日 3月 2018 в 12:25
プログラミング
angular
21日 4月 2017 в 12:09
まだビューはありません
質問へのコメント (9)
ソリューション

コメントしたい。しかし、私は答えを書く行方不明の評判のために。 さて、私はこの問題を解決するために2つの可能性を知っている。

1.グローバル・ドキュメントをインジェクトする。nativescriptなどがそれをサポートしているかわからないので、ベストプラクティスではないかもしれません。しかし、少なくとも純粋なJSを使うよりはましだ。

Rachid Oussanaa
編集した答え 8日 11月 2018 в 11:00
解説 (11)

私は、上記の DaniS 氏の両方のアプローチを組み合わせるのが最良の方法だと思います：レンダラーを使用してクラスを実際に設定/削除する。同時にドキュメントインジェクターも使用する。つまり、コード全体は次のようになります：

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');
    }
}
解説 (1)