如何在 Angular 组件中设置 ::before 伪元素的 CSS 属性？答案

【问题标题】：How to set CSS property of ::before pseudo element in Angular component?如何在 Angular 组件中设置 ::before 伪元素的 CSS 属性？
【发布时间】：2020-10-07 17:06:22
【问题描述】：

有没有办法在我的 Angular 组件中访问我的 SCSS 代码中的 TypeScript 变量？

我想做这样的事情：

<style type="text/css">
  .source-status-{{ event.status.id }}::before {
    border-left: 20px solid {{ event.status.color }};
  }
</style>

<div class="source-status-{{ event.status.id }}">
  ...
</div>

有没有办法在 Angular 组件中设置 ::before 伪元素的 CSS 属性？

【问题讨论】：

标签： css angular pseudo-element

【解决方案1】：

我认为不可能，因为 SCSS 在您构建应用程序时被编译成 CSS，所以不能有任何动态值。
您可以尝试使用 CSS 变量，但您应该更改创建类名的方式。您可以将变量添加到组件的样式属性中，例如：

@HostBinding('attr.style')
  public get cssVariables(): SafeStyle {
    LOGIC TO DEFINE VARIABLE VALUE
    const cssVariables = `
      --my-variable: value
    `;
    return this.sanitizer.bypassSecurityTrustStyle(cssVariables);
  }

在你的 SCSS 文件中你可以使用这个变量：

.source-status-{{--you-should-think-of-static-class-names--}}::before {
    border-left: 20px solid var(--my-variable);
  }

【讨论】：

【解决方案2】：

我找到了解决方法。不是一个好方法，但它正在工作。

在.ts 文件中：

html = '.' + event.status.id + '::after { border-left-color:' + event.status.color + ' !important; } ';

const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = html;
document.getElementsByTagName('head')[0].appendChild(style);

然后在 HTML 文件中：

<div class="color-{{ event.status.id }}">
  ...
</div>

【讨论】：