Angular如何在CSS文件中访问使用组件内部定义的变量值

Angular 独立的样式文件（.css/.scss等）属于预编译静态资源，不支持直接使用模板插值语法{{}}调用组件类中定义的变量，以下是3种可直接落地的实现方案：

方法1：CSS自定义属性绑定（推荐） #

该方案侵入性最低，同时保留CSS文件的样式管理能力。

1. 在组件模板的根元素上绑定自定义CSS属性：

<!-- login.component.html -->
<div class="login-wrapper" [style.--login-bg-path]="imagePath">
  <!-- 组件其余内容 -->
</div>

2. 修改CSS文件，通过var()调用绑定的自定义属性：

/* login.component.css */
.login-wrapper {
  background-image: url(var(--login-bg-path));
}

方法2：模板内联样式绑定 #

适合仅需绑定单个样式、无需复用的场景，不需要修改CSS文件：

<!-- login.component.html -->
<div class="login-wrapper" [style.backgroundImage]="'url(' + imagePath + ')'">
  <!-- 组件其余内容 -->
</div>

方法3：HostBinding类绑定（无需修改模板） #

如果不想改动模板代码，可直接在组件类中通过HostBinding装饰器绑定宿主元素的自定义属性：

// login.component.ts
import { Component, HostBinding, OnInit } from '@angular/core';

export class LoginComponent implements OnInit {
  imagePath: string = 'assets/discord-logo.png';
  
  @HostBinding('style.--login-bg-path')
  get bgPath() {
    return this.imagePath;
  }

  constructor() {}
  ngOnInit() {}
}

CSS文件仍和方法1一致，通过var(--login-bg-path)调用变量即可。

内容的提问来源于stack exchange，提问作者Bilal