css – 动态style在角度2？

可以将样式表的url动态注入到组件中吗？

就像是：

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

或(一厢情愿的想法,并注意到这只是假的代码)：

export class MyComponent implements dynamicUrls {

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

因为如果你能够从样式表1中覆盖某些样式而无需访问它,那么你应该怎么做呢？我唯一的想法是以某种方式拥有动态styleUrls,但我不认为这是甚么可能从我能找到.

有任何想法吗？

解决方法

有可能在某些方面对我来说有用.您可以操纵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 );
    }

在您的组件中,用新的组件替换默认角度2 @Component.

import { CustomComponent } from 'path to CustomComponent';

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

原文地址：https://www.jb51.cc/css/214578.html