Динамический стильUrls в angular 2?

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

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

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

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

export class MyComponent implements dynamicUrls {

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

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

Любые идеи?

Ответ 1

Возможно, в некоторых, возможно, в руке, это сработало для меня. Вы можете манипулировать конструктором 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 );
    }

И в вашем компоненте замените по умолчанию Angular 2 @Component новым.

import { CustomComponent } from 'path to CustomComponent';

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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