如何以角度创建动态DOM元素？答案

【问题标题】：How to create dynamic DOM element in angular?如何以角度创建动态DOM元素？
【发布时间】：2018-05-17 18:10:47
【问题描述】：

我被困在如何以角度创建 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。但是，这需要一个元素，该元素将作为添加动态组件的锚点。在这种情况下，“锚”是可以动态创建的连接线。

有没有我可以在不使用 jQuery 的情况下完成此任务？任何帮助表示赞赏。

【问题讨论】：

见this

标签： javascript jquery angular jsplumb

【解决方案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);
}

【讨论】：