Angular2 styleUrls配列にスタイルを動的に追加します。

Question

私はAgular2でアプリケーションを作成しています。一部のコンポーネントでは、親クラスにスタイルクラスを追加できます。このようなもの：
子コンポーネント。

@Component({ 
selector: 'app-label-value', 
templateUrl: './label-value.component.html', 
styleUrls: ['./label-value.component.css'] 
}) 
export class LabelValueComponent implements OnInit { 

@Input() label: string; 
@Input() value: string; 
@Input() valueClass: string; 
@Input() labelClass: string; 
@Input() cssFile: string; 

getLabelClasses(){ 
    let classList = 'label-value-label ' 
    if (this.labelClass){ 
    classList += this.labelClass; 
    } 
    return classList; 
} 

子テンプレート：親テンプレート内

<div [ngClass]="getLabelClasses()"> 
    {{label}} 
</div> 

。

<app-label-value 
    [label]="'Just text'" 
    [value]="'some text'" 
    [labelClass]="'label-color standard-text'" 
    [cssFile]="'./app.component.css'"> 
</app-label-value> 

これは機能しません。 divはlabel-value-label label-color standard-textクラスを取得しますが、./app.component.cssクラスファイルからロードされないため、表示されません。
子コンポーネントは、何とかstyleUrls配列への./app.component.cssパスを見つけて追加する必要があります。または、コンポーネントにクラスファイルを探す場所を伝える他の方法。しかし、私はそれをどうやって（たとえそれが可能であっても）理解できないようです。

Answer 1

私の問題はViewEncapsulationでした。
親コンポーネントにencapsulation: ViewEncapsulation.Noneを設定すると、その子コンポーネントを含む他のすべてのコンポーネントにそのCSSファイルが表示されました。だから、私の子コンポーネントのstyleUrls配列にCSSファイルを手動で含める必要はありませんでした。ブラウザはそれを見つけました。
もちろん、最善の解決策は、appルートのstyle.cssファイルにすべての「グローバル」スタイルを入れることです。

Answer 2

親から子へ、または子から親へのスタイルシートは、Angular4ではまだ実現できません コンポーネントのスタイルシートに記載されている唯一のスタイルにアクセスできます。

しかし、コンポーネントに複数のスタイルシートを含めるオプションがあります。コンポーネントのすぐそばに、スタイルシートのリストがあります。

@Component({ 
    selector: 'app-component', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css', './someother.css', './another.css'] 
}) 

スタイルをプロジェクト全体で使用できるようにするには、コンポーネントに固有ではなくグローバルにコンパイルされたstyle.cssで記述することができます。