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

Question

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

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

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

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

export class MyComponent implements dynamicUrls {

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

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

Есть идеи?

Answer 1

Возможно, каким-то хакерским способом это сработало для меня. Вы можете манипулировать Angular 2 Component decorator, создавать свой собственный и возвращать Angular decorator со своими свойствами.

  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 ......

Answer 2

Я нашел решение:
1. Я изменил styleurls на стили в декораторе компонента.
2. Я получу свою переменную.
3. Я буду использовать команду require в моем декораторе.

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() { }

  }

В этом базовом примере я импортировал переменную окружения и динамически изменил строку css.

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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