Stile dinamicoUrl in angolare 2?

Question

È possibile iniettare dinamicamente URL in fogli di stile in un componente?

Qualcosa di simile:

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

o (un pio desiderio e si noti che questo è solo falso codice):

export class MyComponent implements dynamicUrls { 

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

Perché se hai intenzione di essere in grado di ignorare certi stili da stylesheet1 senza avendo accesso ad esso, come si dovrebbe fare questo? La mia unica idea è di avere un dinamismo styleUrls in qualche modo, ma non penso che sia nemmeno possibile da quello che ho trovato.

Qualche idea?

Answer 1

Non penso che sia possibile avere URL di fogli di stile dinamici, perché non è possibile accedere alla proprietà o al metodo della classe all'interno del decoratore @Component.

Ma puoi raggiungere il tuo obiettivo con classi di stile dinamiche nel tuo modello.

Answer 2

Avevo lo stesso bisogno di iniettare in modo dinamico urls su fogli di stile e alla fine ho terminato di inizializzare un componente per ogni variabile css (nel mio caso 3 stili differenti) con template vuoto e usarli nel mio componente app con condizione ngIf.

Grazie all'impiego della proprietà "incapsulamento: ViewEncapsulation.None", lo stile del componente selezionato viene quindi aggiunto all'intestazione della pagina e abilitato per ottenere il corretto renderer per l'intera pagina.

Answer 3

Ho usato il collegamento del foglio di stile nel modello html con la condizione ngIf, ha funzionato per me.

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

Answer 4

È possibile che in qualche modo hack ha funzionato per me. Puoi manipolare il decoratore Angular 2 Component, creare il tuo e restituire il decoratore di Angular con le tue proprietà.

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); 
    } 

E nel componente sostituire l'angolare di default 2 @Componente con uno nuovo.

import { CustomComponent } from 'path to CustomComponent'; 

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