web-dev-qa-db-ja.com

Angularの@HostBindingを使用してホスト要素にクラスを動的に追加しますか？

質問：

特にクラスを動的に切り替える必要がある場合に、@HostBindingを使用して、Host要素のクラスを追加、削除、または切り替え、既存のクラスを削除しないことは可能ですか？

たとえば、これによりlightクラスが追加され、前のクラスを中断することはありませんが、lightを動的にすることはできません。

このレンダリングされたdomノードを想像してみてください。

<div [classToggler] class="someClasses1 someClasses2' ></div>

このコントローラーの場合：

@HostBinding('class.light') isLight = theme === 'light';  // true
ngOnInit() {
  this.store.select('classToggler').subscribe((className) => {
      this.theme = className || 'light'
  });

}

この例のコントローラーは、lightクラスを動的に追加しますが、私の知る限り、Host要素の他のクラスを削除します。

@HostBinding('class') theme;

ngOnInit() {
  this.store.select('classToggler').subscribe((className) => {
      this.theme = className || 'light'
  });
}

最後に、2番目の例では、dom要素を次のように再レンダリングします。

<div [classToggler] class="light'></div>

したがって、以前のクラスを削除しますが、これは望ましくありません。両方の世界を最大限に活用する方法についてのアイデアはありますか？

angularangular2-directivesangular2-hostbinding
7
Matthew Harwood

この行を変更します

@HostBinding('class') theme;

に

@HostBinding('class') 
get themeClass(){
  return this.theme;
};
3
Sunil Singh