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

Question

有没有办法在我的 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>

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

标签： cssangularpseudo-element

Answer 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);
  }