web-dev-qa-db-ja.com

Host要素に "class"を追加する方法？

私は自分のコンポーネントに動的に追加する方法を知らない<component></component>動的class属性がテンプレートhtml（component.html）の中に。

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

もう1つの問題は、CSSをコンポーネントの範囲外で定義しなければならず、コンポーネントのカプセル化が破綻することです。

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

angularangular2-template
139
lascarayf
@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を追加する必要がなくなります。 CSSが好き

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

コンポーネントの内側から機能し、セレクターはクラスsomeClassがHost要素に設定されている場合にのみ適用されます。

238
Günter Zöchbauer

Günterの答えは素晴らしいです（質問は動的クラス属性を要求しています）が、私は完全性のためだけに追加すると思いました...

コンポーネントのHost要素に1つ以上の静的クラスを追加するための迅速でクリーンな方法を探している場合（つまり、テーマスタイルの場合）目的）あなたはただすることができます：

@Component({
   selector: 'my-component',
   template: 'app-element',
   Host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}

また、entryタグでクラスを使用すると、Angularはクラスをマージします。つまり、

<my-component class="someClass2">
  I have both someClass1 & someClass2 applied to me
</my-component>
133
JoshuaDavid

これが私のやり方です（Angular 7）：

コンポーネントに入力を追加します。

@Input() componentClass: string = '';

次に、コンポーネントのHTMLテンプレートに次のようなものを追加します。

<div [ngClass]="componentClass">...</div>

そして最後に、コンポーネントをインスタンス化するHTMLテンプレートの中で：

<root componentClass="someclass someotherclass">...</root>

免責事項：私はAngularにかなり慣れていないので、私はここでラッキーになっているかもしれません！

1
zippycoder