Angular 2+コンポーネントの複雑なCSSを動的に設定する方法は？

Question

私はそれを得た箱から頭を出すためにちょっとしたナッジを求めています。

コンテキスト角度CLIおよびIBMアカデミーを用い

角度4。

https://angular.io/docs/ts/latest/guide/component-styles.htmlで言及されるすべてのメソッドは、開発者によって書かれている間成分の複雑なCSSを設定する方法を記載しています。

コンポーネントが作成された後、角度は個々のスタイルを調整しても、タグにさまざまなCSSクラス名を割り当てるコンポーネントにあなたのようにしてください、すべての[ngClass]、<div [class.something]="condition">、様々な@HostBindingデコレーターや他のいくつかの方法を使用していることをすることができます。

ただし、上記のいずれもコンポーネントが使用しているCSS宣言を変更することはできません。方法は、上記（a）のスタイルシート開発者によって定義されたか、（b）成分のテンプレートでは、個々のHTMLタグに個別のCSSプロパティを設定するには、すでに利用可能なものを使用することができます。

質問

そのコンポーネントのすべての要素は、新しいCSSに対応するようにどのように私は、実行時にコンポーネント全体のためのCSSを更新しますか？

私はdiv.someClassに新しいスタイルを導入しました、そして、私はすべての要素div.someClassに新しいスタイルを反映させたいと思います。

Plunker

私の試みのショーケースはここにある：https://plnkr.co/edit/N2C40cSb7hd1AyOxWWdT

ボタンは、私はそれが動作しない理由を私は理解して考えるMyChildComponent.styles

の値に基づいて、赤でなければなりません私が期待する方法は：まもなく、テンプレート内<style />タグ内に見られるものを含め、実行時ではないスタイルは、コンパイル時にコンポーネントで構築されている、と述べました。

しかし、それは動作しない理由を知って、それを動作させるために私を助けていません。

ご協力いただきありがとうございます。新しいCSSクラスを挿入

Answer 1

ソリューション1

は（私の知る限り）ことはできませんが、あなたはあなたの動的コンポーネントにCSSプロパティを挿入することができます。 あなたはボタンのngStyleにこのオブジェクトを渡しますので、私は文字列の代わりにオブジェクトを返します。この

get dynamicStyles(): any{ 
    return {'background': 'red' }; 
    } 

にごdynamicStyles()を修正。テンプレートで

、私はここに、この

<button type="button" 
[ngStyle]="styles"> 
    Button 
</button> 

のようなボタンがあります変更plunkr

ソリューション2

これは私がお勧めしませんものですが、あなたのケースでは、それは可能性があります便利である。あなたは、あなたの子コンポーネントにそれを使用することができるようにComponent.YouがあなたのコンポーネントのCSSをリークすることができます@にこの

encapsulation: ViewEncapsulation.None

と輸入

import {ViewEncapsulation} from '@angular/core' 

を追加することができます。次にあなたの子コンポーネントでボタンに[ngClass]を追加すると、@Input（）で変数を渡すことができます。赤でなければなりません。

<button type="button" 
    [ngClass]="{'redButton': isButtonRed}" 
    >Button</button> 

そして、あなたのstyle.css

.redButton{ 
    background:red; 
} 

でそしてあなたの主成分で

。ここで

<div> 
    <h2>Hello name</h2> 
    <my-child [isButtonRed]="true"></my-child> 
</div> 

は別のplunkr

は、この情報がお役に立てば幸いです。