私は自分のコンポーネントに<component></component>の動的クラス属性を追加する方法を知らないが、テンプレートhtml（component.html）の内側にはありません。"class"をホスト要素に追加する方法は？
私が見つけた唯一の解決策は、 "ElementRef"ネイティブエレメントを使用してアイテムを変更することでした。その解決策は、非常に簡単な何かをするために少し複雑に思えます。
もう1つの問題は、コンポーネントスコープの外側でCSSを定義してコンポーネントのカプセル化を解除する必要があることです。
もっと簡単なソリューションはありますか？テンプレート内に<root [class]="..."> .... </ root>のようなものがあります。
@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;
}
作品等 CSSのみ適用されます。
私は 'ngAfterViewInit（）'の代わりに 'ngOnInit（）'メソッドで 'someField = true'を実行しなければなりませんでした。私はそうでなければ働くことができませんでした。 – John
[ここにフォークを作った]（https://plnkr.co/edit/UsHyi78eza01N25ulxzA?p=preview）実際の '：host'パーツの動作を示しています。 @Component（）デコレータのホストパラメータの詳細はどこで知ることができますか（構文はわかりませんが、[@Componentのドキュメントでは説明していません]（https://angular.io/docs/ts/latest /api/core/index/Component-decorator.html））、好みのHostBindingについて学んでください（これは[Interfaceとしてリストされているだけです]（https://angular.io/docs/ts/latest/api/core/index /HostBinding-interface.html）をAngular2のサイトで使用していますか？） –
私はよく分かっていませんが、 '@Input（）' '@Output（）' '@HostBinding ）@ContentChild（ren）（） –
ギュンターの答えは素晴らしいです（質問がダイナミッククラス属性を求めている）が、1つまたはを追加するために迅速かつクリーンな方法を探しているなら、私は
...私は完全を期すために追加するだろうと思いましたコンポーネントのホスト要素により静的クラス（すなわち、テーマ・スタイリングの目的のために）あなただけ行うことができます。
@Component({
selector: 'my-component',
template: 'app-element',
host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}
をそして、あなたは、エントリのタグにクラスを使用する場合、角度は、クラスをマージします、すなわち、
<my-component class="someClass2">
I have both someClass1 & someClass2 applied to me
</my-component>
シンプルさのためにこれを愛してください。しかし私の場合、ホスト要素は別の属性でカプセル化されていますので、テンプレート内の要素の属性よりも 'ngcontent_host'という名前にしておきましょう。これらを' ngcontent_template'と呼ぶことにしましょう。したがって、 'styleUrls' 'ngcontent_host'には影響しないので、ホスト要素には影響しません。テンプレート要素にのみ影響します。それらは 'ngcontent_template'にしか影響しません。私は間違っていますか？これに関する提案はありますか？私はいつも 'ViewEncapsulation.None'を有効にすることができると思います。 –
Günterが言っているように、おそらくそれは特別な'：host'セレクタです。 [More info here]（https://angular.io/docs/ts/latest/guide/component-styles.html#-host） –
コンポーネントのホスト要素にクラスを追加する、非常に簡単で実用的なソリューションです。私は私のアプリでこれを使用しています。共有のためのトンをありがとう！ – Devner
[typescriptクラス（angular2）でボディクラスを変更する方法]（http://stackoverflow.com/questions/34636661/how-do-i-change-the-body-class） -via-a-typescript-class-angular2） –
はい、この解決法もうまくいきますが、恐ろしいことです。別の問題は、コンポーネントスコープの外側でCSSを定義する必要があることです。 （ElementRefと同様）。 – lascarayf