如何在具有某个类的angular中动态创建div？

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  constructor(private renderer: Renderer2) { }
}

createDynamicDiv() {
  const div = this.renderer.createElement('div');
  this.renderer.addClass(div, 'your-class'); // 添加类名
  this.renderer.setStyle(div, 'background-color', 'red'); // 设置背景颜色
  // 可以设置更多的属性和样式

  // 将动态创建的div添加到容器元素中
  const container = document.getElementById('container');
  this.renderer.appendChild(container, div);
}

<div id="container"></div>
<button (click)="createDynamicDiv()">创建动态div</button>