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

问题描述

在角度上，我试图动态加载组件，但无法执行。我有使用create Js创建的形状，现在要做的是单击该形状时加载组件。此形状绘制在html的canvas标签上。但这让我错了 无法读取未定义的属性'componentFactoryResolver'

App.component.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();})

我有点被困了很久，什么也做不了。任何帮助，将不胜感激。 非常感谢

解决方法

只需更改此内容即可

function (event) {

对此：

(event) => {

箭头函数保留外部this的上下文，而常规函数创建新的上下文。

但是请小心，看起来您正在造成严重的内存泄漏。