如何在运行时在 Angular 模板中生成动态 <style> 标签内容？

Question

我有一个 Angular 组件，它在运行时动态生成 mat-checkbox，我需要用不同的颜色以不同的方式更改每个复选框的各个背景，而且我没有（不会）事先有信息，只能在运行时。

我有以下ng-template 复选框：

<ng-template #renderCheckbox let-id="id" let-attr="attr">
  <mat-checkbox 
    [checked]="attr.show"
    [color]="'custom-' + id"
    (change)="onChange($event.checked, attr)">
    {{attr.name}}
  </mat-checkbox>
</ng-template>

其中，模板中的attr 具有以下接口类型，这些信息是从Highcharts' 系列中提取的，我不想硬编码color。

interface LinkedSeriesAttributes {
  id: string;
  name: string;
  index: number;
  color: string;
  checked: boolean;
}

由于无法预先创建 css 类，也无法直接将颜色应用于 mat-checkbox，因此我只能在模板开头生成 <style>...</style>。

在我的组件中，我的代码会生成这样的样式：

  .mat-checkbox.mat-custom-hello.mat-checkbox-checked .mat-checkbox-background::before {
    color: #6E8BC3 !important;
  }

  .mat-checkbox.mat-custom-world.mat-checkbox-checked .mat-checkbox-background::before {
    color: #9ED6F2 !important;
  }
  ...

但是，我尝试了各种方法将其转储到 <style> 中，但均未成功。我试过了：

<style>{{ dynamicCSSStyles }}</style>

其中，我的 IDE 显示花括号有错误，虽然它编译正常并且运行没有错误，但我什么也没得到，甚至看不到 <style> 标记。

我还尝试将<style> 包含在我的dynamicCSSStyles 变量中，而angular 只是将整个内容作为文本转储...

在 Angular 中生成<style> 的正确方法是什么。

Answer 1

我发现了一种 REALLY 肮脏的“使这项工作”的方式，但它会导致 Angular 不断将 <style> 添加回 DOM。

首先，将encapsulation 设置为ViewEncapsulation.None。

其次，创建一个函数来生成<style>标签的老式方式带有id：

  updateDynsmicStyleNode() {
    const id = 'dynamic-css-styles';
    const nativeElm = this.elmRef.nativeElement;
    const existing = nativeElm.querySelector(`style#${id}`);
    if (!existing) {
      const styleTag = document.createElement('style');
      styleTag.setAttribute('id', id);
      styleTag.innerHTML = this.dynamicCSSStyles;
      nativeElm.prepend(styleTag);
    } else {
      existing.innerHTML = this.dynamicCSSStyles;
    }
  }

第三，在ngAfterViewChecked中调用我们的函数：

  ngAfterViewChecked() {
    this.updateDynsmicStyleNode();
  }

我的意思是，虽然这行得通，真的很糟糕，因为在屏幕上移动鼠标会导致 Angular 不断地重新插入 <style> 标签。

有没有人知道其他更合法的存档方式？哈哈

Answer 2

您可以使用ngClass 或[class] 属性。因为您可以从 component.ts 文件中准备好样式。

你可以这样做：

Way 1: If you already know what the dynamic ids might be, (like if it always will be 'hello' and 'world')

let dynamicClasses = {};

// Once you get some classes from your logic, you can add them to the object above

dynamicClasses['hello'] = 'custom-hello';
dynamicClasses['world'] = 'custom-world';

// Then in HTML
<mat-checkbox [ngClass]="dynamicClasses"></mat-checkbox>



Way 2: If you dont know what the classes also might be, like if its not always be hello or world, then create a method and call it where required, you might need to do something similar to @codenamezero said.