如何在Angular6中动态编译组件样式

我正在尝试一种在Angular6项目中使用jss的方法,以允许组件的动态样式化。

我可以很容易地从jss获得原始CSS输出,但是我还没有找到一种方法来通过角度编译器运行它,从而修改选择器以包含属性选择器。

理想情况下,我希望能够绑定 <style> 在模板中标记组件的cssText属性,但这似乎不可能。

import {Component, OnInit} from '@angular/core';
import * as color from 'color';
import jss from 'jss';

@Component({
  selector: 'app-example',
  template: `
    <p [ngClass]="cssClasses">TEST TEST</p>
  `,
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit {
  cssClasses: { [name: string]: boolean } = {};

  constructor() {
  }

  ngOnInit() {
    const {classes} = jss.createStyleSheet({
      dynamicClass: {
        color: color('blue').hex(),
      }
    }).attach();

    this.cssClasses[classes.dynamicClass] = true;
  }

}

p {
    color: 'red'
}

如果有一种方法可以调用任意CSS片段上的角度CSS编译器,使用特定组件的上下文?

或者另一种方法来实现我上面所描述的?

注意:我知道我可以将内联样式绑定并应用于元素,但这不符合我的要求-特别是您不能使用此机制以伪选择器为目标,或执行媒体查询等。

我可以通过完全不使用scss文件和通过jss机制定义所有默认样式来解决这个问题,但是我希望保留使用普通样式系统的能力,这样jss只在需要的地方使用。另外,我认为在使用jss设计第三方组件的样式时,我仍然会遇到选择性问题。