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

Question

我正在做我的第一个Angular

下面是我的代码-我调用一个REST，返回一个项目数组。我将这些项目渲染到我的画布上，就像这样（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可以引用该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>

一旦元素被添加到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而不是组件选择器上设置ID时，一切都很好，图表创建起来没有任何问题。类似地，当我在CSS文件中为html" target="_blank">组件选择器设置样式时，样式似乎也不会生效。

这是因为组件选择器以某种方式静音，无法访问吗？任何帮助都非常感谢。

这是我给裁判的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的组件范围内。

： host选择器是以host元素为目标的唯一方法。您不能使用其他选择器从组件内部访问主机元素，因为它不是组件自己模板的一部分。主机元素位于父组件的模板中。

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