BinaryDevelop
  1. ホーム
  2. アンギュラー

[解決済み】host要素にclassを追加する方法は？

2022-04-04 19:42:16

質問

コンポーネントに追加する方法がわかりません。 <component></component> ダイナミックな クラス 属性がありますが、テンプレート html (component.html) の中にあります。

私が見つけた唯一の解決策は、"ElementRef" ネイティブ要素を介してアイテムを修正することです。この解決策は、非常に単純であるべきことを行うには少し複雑なようです。

また、CSSをコンポーネントスコープの外で定義しなければならず、コンポーネントのカプセル化を壊してしまうという問題もあります。

もっと簡単な解決策はないのでしょうか？例えば <root [class]="..."> .... </ root> をテンプレートの中に入れてください。

解決方法は？

この方法だと、コンポーネントの外側に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;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します