Angular 在视图模板中创建样式标签

使用Angular在视图模板中创建样式标签

html
  这是一个动态样式的文本。

typescript
import { Component, Renderer2, ElementRef, AfterViewInit } from '@angular/core';
@Component({
  selector: 'app-dynamic-style',
  template: `
    
      动态样式标签示例
      
    
  `,
})
export class DynamicStyleComponent implements AfterViewInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {}
  ngAfterViewInit() {
    // 创建样式标签
    const style = this.renderer.createElement('style');
    const css = '.dynamic-style { color: green; font-size: 18px; }';
    // 将样式添加到样式标签中
    this.renderer.appendChild(style, this.renderer.createText(css));
    // 将样式标签添加到组件的视图中
    this.renderer.appendChild(this.el.nativeElement, style);
  }
}