将类添加到Angular2中组件之外的特定dom中

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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>App Component</h1>
      <button (click)="addComponent()">Add Component</button>
      <div #container></div>
    </div>
  `,
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  addComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourComponent);
    const componentRef = this.container.createComponent(componentFactory);
    // Insert the component into a specific DOM element
    document.getElementById('specific-dom').appendChild(componentRef.location.nativeElement);
  }
}

@Component({
  selector: 'your-component',
  template: '<h2>Your Component</h2>',
})
export class YourComponent {}