Question

我有一个Angular 7应用程序，需要在运行时在组件中动态生成CSS类。

首先，我了解[ngStyle]和[ngClass]！我需要使用无法使用伪选择器生成的伪选择器来做一些事情。

现在，天真的方法：我将仅使用Angular来模板CSS！

<style *ngFor="let class of classes">
    .{{class.prefix}}-target {
        border: 1px solid maroon;
        text-align: center;
      }

      .{{class.prefix}}-control:hover ~ .{{class.prefix}}-target {
          background: red;
        }
  </style>

这种方法的问题：

VS Code抱怨我将Angular模板放入CSS类中。
Angular不会在最终生成的HTML中插值{{class.prefix}}，而只是将{{class.prefix}}插入其中。

在Angular中有没有一种方法可以做到这一点，或者是为此目的而设计的库，还是可以使用的方法？预先感谢！

Answer 1

取决于您需要组件的动态程度...

您可以在组件类外部声明前缀（或动态生成前缀）。然后，在使用@Component（）装饰器的元数据处理样式之前，使用JavaScript模板字符串来解释样式。

像这样：

const classPrefix = 'bar';

@Component({
  selector: 'app-foo',
  template: `
    <!-- Your HTML template -->
  `,
  styles: [`
    .${classPrefix}-target {
        border: 1px solid maroon;
        text-align: center;
    }
    .${classPrefix}-control:hover ~ ${classPrefix}-target {
        background: red;
    }
`]
})
export class FooComponent {
/* . . . */
}

在Angular 7中运行时动态生成CSS类

1 个答案: