向动态创建的组件angular添加类

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-dynamic-component',
  template: `<div #dynamicComponentContainer></div>`
})
export class DynamicComponent {
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  createDynamicComponent() {
    // 获取组件工厂
    const componentFactory = this.resolver.resolveComponentFactory(DynamicComponentToAddClass);

    // 创建动态组件并将其添加到容器中
    const componentRef = this.container.createComponent(componentFactory);

    // 可以通过componentRef来操作动态组件
    // componentRef.instance.property = value;
  }
}

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

@Component({
  selector: 'app-dynamic-component-to-add-class',
  template: `<div class="my-class">Dynamic Component with Added Class</div>`,
  styles: ['.my-class { color: red; }']
})
export class DynamicComponentToAddClass {}

@Component({
  selector: 'app-root',
  template: `
    <button (click)="createDynamicComponent()">Add Dynamic Component</button>
    <app-dynamic-component></app-dynamic-component>
  `
})
export class AppComponent {
  @ViewChild(DynamicComponent) dynamicComponent: DynamicComponent;

  constructor(private resolver: ComponentFactoryResolver) {}

  createDynamicComponent() {
    this.dynamicComponent.createDynamicComponent();
  }
}