Angular 5组件宿主元素属性在jsPlumb中失效，无法创建连接

首先，你遇到的核心问题和Angular的**视图封装（View Encapsulation）**以及jsPlumb对自定义元素的处理逻辑有关，结合你的场景，我们一步步拆解解决：

1. 问题根源拆解 #

Angular默认启用ViewEncapsulation.Emulated（模拟Shadow DOM），会给组件宿主元素和内部DOM节点添加特殊属性（比如_nghost-c4、_ngcontent-c4）实现样式隔离。这会导致两个问题：

• 你给组件宿主元素设置的ID，可能因为Angular DOM更新时机或自定义标签特性，无法被jsPlumb正确识别；
• 直接给组件选择器写的CSS会被隔离，无法生效。
  另外，直接操作组件宿主元素本身也不是Angular推荐的实践方式。

2. 解决方案一：改用组件内部DOM节点（推荐） #

既然把ID设到内部div时一切正常，我们可以标准化这个流程：

• 在CardComponent模板中给内部容器添加模板引用变量：

  <div #nodeContainer class="item">
    Hi! I'm a node. My name is {{cardData.name}}.
  </div>
  

• 在CardComponent类中定义该引用变量：

  import { Component, Input, ViewChild, ElementRef } from '@angular/core';
  
  @Component({
    selector: 'card',
    templateUrl: './card.component.html'
  })
  export class CardComponent {
    @Input() cardData: any;
    @ViewChild('nodeContainer') nodeContainer!: ElementRef;
  }
  

• 修改addNodeToCanvas方法，将ID赋值给内部div而非宿主元素：

  addNodeToCanvas(card) {
    const factory = this.ComponentFactoryResolver.resolveComponentFactory(CardComponent);
    const ref = this.cardDontainer.createComponent(factory);
    ref.instance.cardData = card;
    // 给内部div设置ID
    ref.instance.nodeContainer.nativeElement.id = card.uuid;
    // 强制触发变更检测，确保DOM更新完成
    ref.changeDetectorRef.detectChanges();
  }
  

这样jsPlumb操作的是标准div元素，完全避开组件宿主元素的限制，样式也能正常生效（div的样式可在组件内部或全局样式中定义）。

3. 解决方案二：关闭组件视图封装（可选） #

如果你一定要用组件宿主元素作为连接节点，可以关闭CardComponent的视图封装：

import { Component, Input, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'card',
  templateUrl: './card.component.html',
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class CardComponent {
  @Input() cardData: any;
}

关闭后，组件宿主元素和内部DOM会完全暴露在全局作用域，ID能被jsPlumb正常识别，组件选择器的CSS也会生效。但注意这种方式会失去样式隔离，可能引发样式冲突，需谨慎使用。

4. 确保DOM就绪后调用jsPlumb #

无论用哪种方案，都要确保动态组件的DOM完全渲染后，再调用jsPlumb的方法：

// 先添加所有节点
this.addNodes();
// 触发变更检测，确保DOM更新完成
this.cdr.detectChanges();
// 再初始化jsPlumb的拖拽和连接
this.initJsPlumbConnections();

同时，调用jsPlumb时最好先确认元素存在，避免因元素未就绪导致连接失败：

for (let c of cards) {
  const element = document.getElementById(c.uuid);
  if (element) {
    this.jsPlumbInstance.draggable(element);
  }
}
for(let e of edges) {
  const sourceEl = document.getElementById(e.source);
  const targetEl = document.getElementById(e.destination);
  if (sourceEl && targetEl) {
    this.jsPlumbInstance.connect({
      source: sourceEl,
      target: targetEl,
    }, routeConnectionSettings);
  }
}

测试验证 #

修改后先检查DOM结构，确认目标元素ID正确设置，再查看jsPlumb是否能正常创建SVG连接器。如果仍有问题，可打开浏览器控制台查看jsPlumb的报错信息，进一步排查。

内容的提问来源于stack exchange，提问作者yazz