Javascript 在Angular 5组件主体元素上设置的属性在jsPlumb中无效

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

以下是我的密码- 我调用REST并返回一个项目数组。我将这些项目呈现到我的“画布”上，就像这样（addNodeToCanvas在循环中被调用）——

注意，在第4行中，我将对象的唯一标识符设置为DOM元素的ID，jsPlumb可以引用该ID来创建连接。当我运行应用程序时，我会看到一个呈现的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>

现在我面临的问题是，当jsplump查找元素card#6c7e7bd4-200f-4b8b-8492-a59fb8809819（例如）时，它无法在DOM树上找到该元素，并且没有创建连接

我注意到其中的几点- 在div上而不是在组件选择器上设置ID时，一切正常，并且创建的关系图没有任何问题。 类似地，当我在CSS文件中为组件选择器设置样式时，这些样式似乎也不会生效

这是因为组件选择器以某种方式被禁用，无法访问吗？非常感谢您的帮助

这是我的JSON for ref-

"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"
    }
]

---

设置

：host{display:block；}

将解决此问题

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

：主机选择器是指向主机元素的唯一方法。你 无法通过其他组件从组件内部访问主体元素 选择器，因为它不是组件自身模板的一部分。这个 主体元素位于父组件的模板中

---

角度文档：

尝试设置

：主机{display:block；}

，您不能直接访问模板选择器，因为它不在应用CSS的组件范围内<代码>：主机将把css应用到组件选择器。这正是我想要的。设置：主机修复了我的问题。谢谢请将您的评论作为答案发布，以便我将问题标记为已回答。

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);
}

"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"
    }
]