css - Angular 2 中的动态 styleUrls？

Question

是否可以将样式表的 url 动态注入(inject)到组件中？

类似于:

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

或(一厢情愿并注意这只是假代码):

export class MyComponent implements dynamicUrls {

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

因为如果您能够覆盖 stylesheet1 中的某些样式而无需访问它，您应该怎么做？我唯一的想法是以某种方式拥有动态 styleUrls 但我认为从我能找到的情况来看这甚至是不可能的。

有什么想法吗？

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