239

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

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

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

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

4

9 に答える 9

390

この方法では、コンポーネントの外側に 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;
}
于 2016-01-06T21:40:30.520 に答える