Question

我坚持如何在角度中创建一个dom元素并将其传递给我用于绘制图表的jsPlumb。

我使用jsPlumb在节点之间创建连接，并且需要在这些连接上创建叠加层。官方的jsPlumb文档要求我做这样的事情 -

["Custom", {
    create:function(component) {
        return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>");               
    },
    location:0.5,
    id:"customOverlay"
}]

在这一行 -

return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>");

该示例使用jQuery创建一个元素并将其传递给jsPlumb。但是，在我的应用程序中，我不使用jQuery。如果不使用jQuery，有没有一种有角度的方法呢？

此外，如果我想传递下面的组件，而不是传递元素，我该怎么做？

return $("<custom-overlay></custom-overlay>");

我考虑使用ViewContainerRef。但是，这需要一个元素作为锚点，动态组件将被添加。在这种情况下，＆＃34;锚＆＃34;是一个可以动态创建的连接线。

无论如何我可以在不使用jQuery的情况下实现这一目标吗？任何帮助表示赞赏。

Answer 1

以下是我不使用jQuery的解决方案

我使用ViewContainerRef动态创建组件，如此 -

addOverlayToCanvas(edge) {
    const factory = this.ComponentFactoryResolver.resolveComponentFactory(OverlayComponent);
    const ref = this.overlayContainer.createComponent(factory);
    ref.instance.edge = edge;
    ref.instance['onDeleteEventEmitter'].subscribe((eventInfo) => {
        this.onDelete(eventInfo);
    });
    return ref;
}

并在创建边缘时调用此方法，并将此元素添加为叠加层，如此 -

for (let e in edges) {
    let edgeSettings = {
        source: edges[e].sourceId,
        target: edges[e].destinationId
    }
    if(edges[e].overlayId) {
        let overlay = self.addOverlayToCanvas(edges[e]);
        edgeSettings['overlays'] = [
            ['Custom', {
                create:function(component) {
                    return overlay.location.nativeElement;                
                },
                location:0.5,
                id:'customOverlay'
            }]
        ];
    }

    let connection = this.jsPlumbInstance.connect(edgeSettings, this.routeConnectionSettings);
}

如何在角度中创建动态DOM元素？

1 个答案: