将angular动态组件附加到tippyjs内容

Question

我在angular中使用的是带有tippy-js的fullcalendar(v3(事件渲染，那么我如何在fullcalendary(v3(的事件渲染中将angular动态组件附加到tippy-js内容。

const eventRender = function (event: IEvent, view) {
if (event.info) {
const factory = this._resolver.resolveComponentFactory(EventViewComponent);
let ref;
if (event.rendering === 'background') {
ref = factory.create(this._injector, [], view.get(0));
} else {
ref = factory.create(this._injector, [], view.children('.fc-content').get(0));
}
ref.instance.eventInfo = event.info;
this.dynamicComponent.push(ref);
this._app.attachView(ref.hostView);
}

而且我只是创建了动态组件，并将事件渲染附加到完整日历

Answer 1

html:

<div #tippyTemplate>
<h4>Caption</h4>
<p>Some content</p>
</div>

ts:

@ViewChild("tippyTemplate", { read: ElementRef, static: false }) tippyTemplate: ElementRef;
...
const template = this.tippyTemplate.nativeElement;
tippy(info.el, {
content: template,
allowHTML: true,
hideOnClick: "toggle",
placement: "top",
trigger: "click",
});