将角度动态组件附加到tippy js内容

npm install tippy.js @angular/cdk

// dynamic.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic',
  template: `<p>This is a dynamic component!</p>`
})
export class DynamicComponent {}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DynamicComponent } from './dynamic.component';

@NgModule({
  declarations: [
    AppComponent,
    DynamicComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [DynamicComponent] // 注意这里
})
export class AppModule { }

// app.component.ts
import { Component, ViewChild, ElementRef, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import tippy from 'tippy.js';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-root',
  template: `<button #trigger>Click me</button>`
})
export class AppComponent {
  @ViewChild('trigger', { static: true }) trigger: ElementRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) {}

  ngAfterViewInit() {
    tippy(this.trigger.nativeElement, {
      content: this.createDynamicContent(),
      interactive: true,
      allowHTML: true
    });
  }

  createDynamicContent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
    return componentRef.location.nativeElement;
  }
}