动态styleUrls在角度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装饰器,创建自己的装饰并使用您的属性返回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 ......

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，因为您无法访问@Component装饰器内的类属性或方法。

但是您可以通过在模板中使用动态样式类来实现您的目标。