[英]How to create dynamic DOM element in angular?
I'm stuck at how to create a dom element in angular and pass it to jsPlumb which I am using to draw charts. 我被困在如何以角度创建dom元素并将其传递给我用来绘制图表的jsPlumb中。
I create connections between nodes using jsPlumb and need to create an overlay on these connections. 我使用jsPlumb在节点之间创建连接,并且需要在这些连接上创建覆盖。 The offical jsPlumb documentation asks me to do something like this -
正式的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"
}]
In this line - 在这一行-
return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>");
the example creates an element using jQuery and passes it to jsPlumb. 该示例使用jQuery创建一个元素,并将其传递给jsPlumb。 However, in my application I don't use jQuery.
但是,在我的应用程序中,我不使用jQuery。 Is there an angular way to do this without using jQuery?
有没有使用jQuery的角度方法?
Also, instead of passing an element, if I wanted to pass a component like below, how do I do it? 另外,如果我想传递如下组件,而不是传递元素,该怎么做?
return $("<custom-overlay></custom-overlay>");
I considered using a ViewContainerRef. 我考虑过使用ViewContainerRef。 However, that requires an element which will be the anchor the dynamic components will be added.
但是,这需要一个元素,它将成为添加动态组件的锚点。 In this case the "anchor" is a connection line which can be dynamically created.
在这种情况下,“锚点”是可以动态创建的连接线。
Is there anyway I can accomplish this without using jQuery? 无论如何,我无需使用jQuery就可以完成此任务? Any help is appreciated.
任何帮助表示赞赏。
Below is my solution without using jQuery 以下是我不使用jQuery的解决方案
I create components dynamically using ViewContainerRef like so - 我像这样使用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;
}
and call this method at the time of edge creation and add this element as overlay, like so - 并在创建边缘时调用此方法,并将此元素添加为叠加,如下所示-
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.