Estilo dynamicUrls en angular 2?

¿Es posible inyectar urls dinámicamente a hojas de estilo en un componente?

Algo como:

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

o (ilusiones y tenga en cuenta que esto es solo código falso):

 export class MyComponent implements dynamicUrls { ngDynamicUrls() { this.inject(['anotherStylesheet.css', 'anotherStylesheet2.css']); } } 

Porque si vas a poder anular ciertos estilos de stylesheet1 sin tener acceso a ellos, ¿cómo se supone que debes hacer eso? Mi única idea es tener styleUrls dinámicas de alguna manera, pero no creo que esto sea siquiera posible por lo que pude encontrar.

¿Algunas ideas?

Es posible que en alguna forma tal vez haya funcionado para mí. Puede manipular el decorador Angular 2 Component, crear uno propio y devolver el decorador de Angular con sus propiedades.

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

Y en su componente, reemplace el angular predeterminado 2 @Component por uno nuevo.

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

Solía ​​tener la misma necesidad de inyectar urls dinámicamente a las hojas de estilo y finalmente finalicé para inicializar un componente para cada CSS variable (en mi caso, 3 diferentes estilos) con una plantilla vacía y usarlas en el componente de mi aplicación con la condición ngIf.

Gracias al uso de la propiedad “encapsulación: ViewEncapsulation.None”, el estilo del componente seleccionado se agrega al encabezado de la página y permite obtener el renderizador correcto para toda la página.

He encontrado una solución:
1. He cambiado los styleurls por estilos en el decorador de componentes.
2. Conseguiré mi variable.
3. Usaré el comando de requerir en mi decorador.

 import { Component } from '@angular/core'; import { environment } from '../environments/environment'; let lang = environment['lang']; @Component({ selector: 'app', templateUrl: './app.component.html', styles: [require('./app.component.css'), require('./app.component.' + lang + '.css')] }) export class AppComponent { constructor() { } } 

En este ejemplo básico, importé la variable de entorno y cambié dinámicamente la cadena css.

No creo que pueda tener URLs de hojas de estilo dinámicas, porque no puede acceder a su propiedad o método de clase dentro de @Component decorator.

Pero puede lograr su objective teniendo clases de estilo dynamic en su plantilla.

Usé el enlace de la hoja de estilo en la plantilla html con la condición ngIf, funcionó para mí.