Динамический стильУгли в угловом 2?

Question

Можно ли динамически вводить URL-адреса в таблицы стилей в компонент?

Что-то вроде:

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

или (выдавать желаемое за действительное и обратите внимание, что это просто подделка код):

export class MyComponent implements dynamicUrls { 

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

Потому что, если вы собираетесь быть в состоянии переопределить некоторые стили stylesheet1 без имея доступ к нему, как вы должны это делать? Моя единственная идея - иметь динамический styleUrls, но я не думаю, что это возможно даже из того, что я могу найти.

Любые идеи?

Answer 1

Я не думаю, что вы можете иметь динамические URL-адреса стилей, потому что вы не можете получить доступ к свойству класса или методу внутри @Component decorator.

Но вы можете достичь своей цели, имея динамические классы стиля в своем шаблоне.

Answer 2

У меня была такая же потребность динамически вставлять URL-адреса в таблицы стилей и в конечном итоге заканчиваться, чтобы инициализировать компонент для каждой переменной css (в моем случае 3 стили разницы) с пустым шаблоном и использовать их в моем приложении с условием ngIf.

Благодаря использованию свойства «encapsulation: ViewEncapsulation.None» стиль выбранного компонента затем добавляется в заголовок страницы и позволяет получить правильный рендерер для всей страницы.

Answer 3

Я использовал ссылку stylesheet в html-шаблоне с условием ngIf, это сработало для меня.

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

Answer 4

Возможно, это возможно в случае взлома, это сработало для меня. Вы можете манипулировать угловым декодером компонентов, создать свой собственный и вернуть декор Углового с вашими свойствами.

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 @Component новым.

import { CustomComponent } from 'path to CustomComponent'; 

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