角度2の動的スタイルのURL？

Question

コンポーネントにスタイルシートにURLを動的に挿入することは可能ですか？

何かのように：

styleUrls: [ 
    'stylesheet1.css', 
    this.additionalUrls 
] 

か（希望的観測と、これはちょうど偽のコードがあることに注意してください）：

export class MyComponent implements dynamicUrls { 

    ngDynamicUrls() { 
    this.inject(['anotherStylesheet.css', 'anotherStylesheet2.css']); 
    } 
} 

あなたはつもりなしstylesheet1から特定のスタイルを上書きすることができている場合ので、それにアクセスすると、どうやってそれをするのですか？私の唯一のアイデアは、どういうわけかダイナミックなstyleUrlsですが、私はこれが私が見つけたものからも可能ではないと思います。

アイデア？

Answer 1

@Componentデコレータ内のクラスプロパティまたはメソッドにアクセスできないため、動的スタイルシートURLを使用できないと思います。

しかし、テンプレートにダイナミックなスタイルクラスを設定することで、目標を達成できます。

Answer 2

私は動的にスタイルシートにURLを挿入する必要がありましたが、最終的に各変数css（私の場合は3種類のスタイル）のコンポーネントを空のテンプレートで初期化し、ngIf条件のアプリケーションコンポーネントで使用します。

プロパティ "encapsulation：ViewEncapsulation.None"の使用により、選択したコンポーネントのスタイルがページのヘッダーに追加され、ページ全体の正しいレンダラーを取得できるようになります。

Answer 3

ngIf条件のhtmlテンプレートでスタイルシートリンクを使用しましたが、それは私のために働いていました。

<link rel='stylesheet' href="/stylesheets/classicTheme.css" *ngIf="theme === 'classic' " /> 
<link rel='stylesheet' href="/stylesheets/styleTheme.css" *ngIf="theme === 'style' " /> 

Answer 4

多分それは私のために働く可能性がありますハックの方法です。あなたはAngular 2 Componentデコレータを操作し、独自のものを作成し、あなたのプロパティでAngularのデコレータを返すことができます。

import { Component } from '@angular/core'; 

    export interface IComponent { 
     selector: string; 
     template?: string; 
     templateUrl?: string; 
     styles?: string[]; 
     styleUrls?: string[]; 
     directives?: any; 
     providers?: any; 
     encapsulation?: number; 
    } 

    export function CustomComponent(properties: IComponent): Function { 
     let aditionalStyles: string; 

     try { 
      aditionalStyles = require(`path to aditional styles/${ properties.selector }/style/${  properties.selector }.${ GAME }.scss`); 
      properties.styles.push(aditionalStyles); 
     } catch (err) { 
      console.warn(err) 
     } 
     } 

     return Component(properties); 
    } 

コンポーネントのデフォルト角度2 @コンポーネントを新しいコンポーネントに置き換えます。

import { CustomComponent } from 'path to CustomComponent'; 

@CustomComponent({ 
    selector: 'home', 
    templateUrl: './template/home.template.html', 
    styleUrls: [ './style/home.style.scss'] 
}) 
export class ......