如何在 canvas 形状点击时动态加载 angular 组件?
How to load an angular component dynamically on canvas shape click?
在 angular 中,我试图动态加载一个组件,但我做不到。我有使用 create Js 创建的形状,现在我想要做的是当这个形状得到 clicked.This 形状时加载一个组件 canvas 标签 html。但它给我一个错误
无法读取未定义的 属性'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
上下文,而常规函数创建新上下文。
不过要小心,看起来你正在造成相当严重的内存泄漏。
在 angular 中,我试图动态加载一个组件,但我做不到。我有使用 create Js 创建的形状,现在我想要做的是当这个形状得到 clicked.This 形状时加载一个组件 canvas 标签 html。但它给我一个错误 无法读取未定义的 属性'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
上下文,而常规函数创建新上下文。
不过要小心,看起来你正在造成相当严重的内存泄漏。