Как создать динамический элемент DOM в угловых? - PullRequest
Новая
       7

Как создать динамический элемент DOM в угловых?

0 голосов
/ 17 мая 2018

Я застрял в том, как создать элемент dom в angular и передать его в 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? Любая помощь приветствуется.

1 Ответ

0 голосов
/ 18 мая 2018

Ниже мое решение без использования 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);
}
...