使用 Angular ComponentFactory 的工具提示工件

Question

我正在使用 ComponentFactory 创建并运行一个组件，我将其用作 yFiles 上的工具提示（来自 yWorks 的精彩 HTML 图表）。

我无法让工具提示显示，当工具提示关闭时它会留下瑕疵。

有人有什么建议吗？

this.component = this.factory.create(this.injector);
this.component.instance.entity = entitySingle;
this.component.location.nativeElement.class = 'single-entity-card';
this.component.changeDetectorRef.detectChanges();
this.component.onDestroy(() => {
  // console.log('destroy');
  super.ngOnDestroy();
  this.graphComponent.invalidate();
});
tooltip.appendChild(this.component.location.nativeElement);

Image of the Tooltip artificats

Artifacts marked with red circles

Answer 1

这只是一个大胆的猜测。尝试将您的元素放入一个新的“div”中，并在 onDestroy 中清除所有 div 的子元素，只是为了“确定”。

如果您向我们展示显示人工制品的 DOM 并可能提供有关如何创建这些人工制品的更多详细信息，我们也许能够提供更好的帮助。

Answer 2

我找到了隐藏工件的解决方法。

在 editMode.addQueryItemToolTipListener 上使用 yFiles 创建工具提示时，它会呈现在页面正文中（请参见下面的屏幕图片）。 Angular 组件然后在 cdk-overlay-container（下面的第二个屏幕图片）中呈现（工具提示的）工具提示，但是 Angular 工具提示保持为空并且在 yFiles 工具提示之后不会被清理关闭。

我现在的解决方法是通过 CSS:

隐藏 Angular 工具提示

::ng-deep {
  body .cdk-overlay-container {
    .mat-tooltip-panel {
      visibility: hidden;
    }
  }
}

如果我能让 Angular 工具提示在 yFiles 工具提示上工作，我会很高兴，但这就足够了。

screenpicture of tooltip html

screenpicture of the Angular artifacts html

使用 Angular ComponentFactory 的工具提示工件

Tooltip artifacts using Angular ComponentFactory

angular

yfiles