如何在画布形状单击上动态加载角度组件？

Question

在 angular 中，我试图动态加载一个组件，但我无法做到。 我有我使用 create Js 创建的形状，现在我想要做的是在点击这个形状时加载一个组件。这个形状是在 html 的画布标签上绘制的。 但它给我一个错误无法读取未定义的属性“componentFactoryResolver”

应用组件.html

 <div #parent> </div>

App.component.ts

@ViewChild('parent', { static: true, read: ViewContainerRef }) target: ViewContainerRef;
private componentRef: ComponentRef<any>;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
let square = new createjs.Shape();
square.graphics.beginFill(color).drawRect(dot.x, dot.y, 100, 100);

 //ClICK LISTENER. HERE I WANT TO LOAD A COMPONENT BUT THROWING ME A Cannot read property 'componentFactoryResolver' of undefined
square.addEventListener("click", function (event) {
//DYN
let childComponent = this.componentFactoryResolver.resolveComponentFactory(dynamicComponent);
this.componentRef = this.target.createComponent(childComponent);
this.addElement();})

我有点卡住了很长时间，什么也做不了。 任何帮助，将不胜感激。 非常感谢

Answer 1

只需改变这个：

function (event) {

对此：

(event) => {

箭头函数保持外部this上下文，而常规函数创建一个新上下文。

不过要小心，看起来你正在创建一个非常严重的内存泄漏。