[解決済み] Angular2 bodyタグにクラスを追加する

質問

どのようにすれば クラス を ボディ タグを作成することなく ボディ をアプリのセレクタとして使用し、ホストバインディングを使用せずに？

レンダラを使ってみましたが、ボディ全体が変更されてしまいます。

Angular 2.xでbodyタグにクラスをバインドする。

私は大きなAngular2アプリに取り組んでいて、ルートセレクタを変更すると多くのコードに影響を与えるので、多くのコードを変更しなければなりません。

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

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

どのように解決するのですか?

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

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

コンストラクタ(@Inject(DOCUMENT) private document: ドキュメント) {}

ngOnInit(){
   this.document.body.classList.add('test')を実行します。
}

さて、そしておそらくさらに良い方法です。レンダラーまたはレンダラー2（NG4の場合）をインジェクトして、レンダラーでクラスを追加することができます。

export class myModalComponent implements OnDestroy { (エクスポートクラス myModalComponent は OnDestroy を実装しています)

  コンストラクタ(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 { (エクスポートクラス myModalComponent は OnDestroy を実装しています)

  コンストラクタ(private renderer: Renderer2) {。
    this.renderer.addClass(document.body, 'modal-open');
   



  ngOnDestroy() {
    this.renderer.removeClass(document.body, 'modal-open'); } ngOnDestroy() { this.renderer.removeClass(document.body, 'modal-open')
  }