Атрибуты, установленные для хост-элемента Angular 5 Component, не действуют в jsPlumb - PullRequest
Новая
       9

Атрибуты, установленные для хост-элемента Angular 5 Component, не действуют в jsPlumb

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

Я работаю над своим самым первым приложением Angular> 2 и создаю его с нуля.Я пытаюсь нарисовать блок-схемы на моем приложении, используя jsPlumb.Я застрял в проблеме, когда, когда я устанавливаю элемент host компонента в качестве источника и назначения моих соединений jsPlumb, коннектор не обрабатывается (соответствующий svg не создается).

Ниже приведены моикод - я вызываю REST с возвращает массив элементов.Я отображаю эти элементы на моем «Canvas» следующим образом (addNodeToCanvas вызывается в цикле) - 

addNodeToCanvas(card) {
    const factory = this.ComponentFactoryResolver.resolveComponentFactory(CardComponent);
    const ref = this.cardDontainer.createComponent(factory);
    ref.location.nativeElement.id = card.uuid; 
    ref.instance.cardData = card;
}

Обратите внимание, в строке 4 я устанавливаю уникальный идентификатор объекта в качестве элемента DOMID, на который может ссылаться jsPlumb для создания соединений.Когда я запускаю приложение, я вижу список визуализированных DOM, аналогичный приведенному ниже - 

<card _nghost-c4="" id="6c7e7bd4-200f-4b8b-8492-a59fb8809819" class="ng-star-inserted">
    <div _ngcontent-c4="" class="item">
        Hi! I'm a node. My name is Dest 1.
    </div>
</card>

После добавления элементов в DOM я создаю соединение следующим образом - 

for (let c in cards) {
    this.jsPlumbInstance.draggable(cards[c].uuid);
}
for(let e in edges) {
    this.jsPlumbInstance.connect({
        source: edges[e].source,
        target: edges[e].destination,
    }, routeConnectionSettings);
}

Теперь проблема, с которой я сталкиваюсь, заключается в том, что, когда jsPlumb ищет карточку элемента # 6c7e7bd4-200f-4b8b-8492-a59fb8809819 (например), он не может найти этот элемент в дереве DOM и не создает соединения.

Пару из этого я заметил - при установке идентификатора на div вместо селектора компонентов все работает нормально, и диаграмма создается без проблем.Точно так же, когда я устанавливаю стиль для селектора компонентов в файле CSS, кажется, что стили также не вступают в силу.

Это происходит потому, что селекторы компонентов каким-то образом отключены, и к ним нельзя получить доступ?Любая помощь с благодарностью.

Это мой JSON для ссылки - 

"edges": [
    {
        "uuid": "dcc1151f-4668-4b3a-bbce-bc473545fcd7",
        "source": "770a7359-d8cf-4803-9901-0383a8d080f2",
        "destination": "6c7e7bd4-200f-4b8b-8492-a59fb8809819"
    }
],
"cards": [
    {
        "uuid": "6c7e7bd4-200f-4b8b-8492-a59fb8809819",
        "name": "Dest 1",
        "type": "DESTINATION"
    },
    {
        "uuid": "770a7359-d8cf-4803-9901-0383a8d080f2",
        "name": "Src 1",
        "type": "SOURCE"
    }
]

1 Ответ

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

Настройка :host{display: block;} решит проблему.

Вы не можете напрямую получить доступ к селектору шаблона, поскольку применение CSS не входит в область действия компонента.

Селектор: host является единственным способом нацеливания на элемент host.Вы не можете получить доступ к элементу хоста внутри компонента с другими селекторами, потому что он не является частью собственного шаблона компонента.Элемент хоста находится в шаблоне родительского компонента.

Angular Docs: https://angular.io/guide/component-styles#host

...