☰

ホスト要素に「クラス」を追加するにはどうすればいいですか? 質問する

tag-icon • tag-icon angular angular2-template
ホスト要素に「クラス」を追加するにはどうすればいいですか? 質問する

テンプレート HTML (component.html) 内でコンポーネントに<component></component>動的クラス属性を追加する方法がわかりません。

私が見つけた唯一の解決策は、「ElementRef」ネイティブ要素を介してアイテムを変更することです。この解決策は、非常に単純なはずのことを実行するには少し複雑に思えます。

もう 1 つの問題は、CSS をコンポーネント スコープ外で定義する必要があり、コンポーネントのカプセル化が壊れてしまうことです。

もっと簡単な解決策はありますか?<root [class]="..."> .... </ root>テンプレート内のようなものです。

ベストアンサー1

この方法では、コンポーネントの外部に CSS を追加する必要がありません。

@Component({
   selector: 'body',
   template: 'app-element',
   // prefer decorators (see below)
   // host:     {'[class.someClass]':'someField'}
})
export class App implements OnInit {
  constructor(private cdRef:ChangeDetectorRef) {}
  
  someField: boolean = false;
  // alternatively also the host parameter in the @Component()` decorator can be used
  @HostBinding('class.someClass') someField: boolean = false;

  ngOnInit() {
    this.someField = true; // set class `someClass` on `<body>`
    //this.cdRef.detectChanges(); 
  }
}

プランカーの例

この CSS はコンポーネント内で定義され、セレクターはクラスがsomeClassホスト要素 (外部から) に設定されている場合にのみ適用されます。

:host(.someClass) {
  background-color: red;
}

おすすめ記事