在 Angular 上设置的属性 5 组件宿主元素在 jsPlumb 中未生效

Question

我正在开发我的第一个 Angular >2 应用程序并从头开始构建它。我正在尝试使用 jsPlumb 在我的应用程序上绘制流程图。我遇到了一个问题，当我将组件主机元素设置为我的 jsPlumb 连接的源和目标时，连接器没有被渲染（相应的 svg 没有被创建）。

以下是我的代码 - 我用 returns 项数组调用 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 行中，我将对象的唯一标识符设置为 DOM 元素的 ID，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 查找元素 card#6c7e7bd4-200f-4b8b-8492-a59fb8809819（例如）时，它无法在 DOM 上找到该元素树并且它没有创建连接。

我注意到了其中的几个 - 在 div 而不是组件选择器上设置 ID 时，一切正常，图表创建没有任何问题。同样，当我在 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"
    }
]

Answer 1

设置:host{display: block;}即可解决问题。

您不能直接访问模板选择器，因为它不在要应用的组件范围内 CSS。

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.

Angular 文档：https://angular.io/guide/component-styles#host

在 Angular 上设置的属性 5 组件宿主元素在 jsPlumb 中未生效

Attributes set on Angular 5 Component host element not taking effect within jsPlumb

javascript

css

jsplumb

angular