Angular2はボディタグにクラスを追加します

ボディをアプリセレクターにしてホストバインディングを使用せずに、ボディタグにクラスを追加するにはどうすればよいですか？

レンダラーを使ってみましたが、全身が変わります

bodyタグのAngular 2.xバインドクラス

私は大きなangular2アプリで作業していて、ルートセレクターを変更すると多くのコードに影響し、多くのコードを変更する必要があります

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

動的に作成されたモーダルコンポーネントを開くと、ドキュメントのスクロールバーを非表示にしたい

コメントしたいです。しかし、評判が足りないので、私は答えを書きます。この問題を解決する2つの可能性を知っています。

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

コンストラクター（@Inject（DOCUMENT）private document：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'から{Component、OnDestroy、Renderer2}をインポートします。

エクスポートクラスmyModalComponentはOnDestroy {

  コンストラクター（プライベートレンダラー：Renderer2）{
    this.renderer.addClass（document.body、 'modal-open'）;
   }

  ngOnDestroy（）{
    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');
    }
}