appセレクタとしてbodyを作り、ホストバインディングを使用せずに、bodyタグにclassを追加するにはどうすればよいですか?
レンダラーを使ってみましたが、body全体が変わってしまいます。
https://stackoverflow.com/questions/34430666/angular-2-x-bind-class-on-body-tag
私は大きなangular2アプリに取り組んでおり、ルートセレクタを変更すると、多くのコードに影響します。
私のユースケースはこうです:
モーダルコンポーネント(動的に作成される)を開いたときに、ドキュメントのスクロールバーを隠したい。
コメントしたい。しかし、私は答えを書く行方不明の評判のために。 さて、私はこの問題を解決するために2つの可能性を知っている。
1.グローバル・ドキュメントをインジェクトする。nativescriptなどがそれをサポートしているかわからないので、ベストプラクティスではないかもしれません。しかし、少なくとも純粋なJSを使うよりはましだ。
<pre>; コンストラクタ(@Inject(DOCUMENT) private document:ドキュメント) {}
ngOnInit(){ this.document.body.classList.add('test'); }
</pre>;
さらに良い方法があります。レンダラーまたはレンダラー2(NG4の場合)をインジェクトして、レンダラー付きのクラスを追加できます。
<pre>; 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); } </pre>;
angular4:用に編集しました。 <pre>; import { Component, OnDestroy, Renderer2 } from '@angular/core';
export class myModalComponent implements OnDestroy {.
コンストラクタ(private renderer: Renderer2){ this.renderer.addClass(document.body, 'modal-open'); }
ngOnDestroy() { 次のようにします。 this.renderer.removeClass(document.body, 'modal-open');; } </pre>;
私は、上記の 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');
}
}