如何从Angular组件中读取:root中的CSS变量？

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `
    <div class="your-component">Hello World</div>
  `,
  styles: [`
    :root {
      --primary-color: blue;
    }
    .your-component {
      color: var(--primary-color);
    }
  `]
})
export class YourComponent implements OnInit {
  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    const rootStyles = getComputedStyle(this.elementRef.nativeElement);
    const primaryColor = rootStyles.getPropertyValue('--primary-color');
    console.log(primaryColor); // 输出: blue
  }
}