cytoscape.js - Cytoscape.js 图形不在嵌套的角度组件中运行。错误 - 无法读取 null 的属性“className”

Question

我正在尝试为 cytoscape 中内置的图形创建一个单独的角度组件。现在我试图在 Angular 的另一个组件中使用相同的组件，但它没有做任何事情。它还给了我一个错误错误 - 无法读取 null 的属性“className”

这是 Stackblitz：

https://stackblitz.com/edit/angular-xvrntx?file=src%2Fapp%2Fdata-cytoscape%2Fdata-cytoscape.component.html

单击图形并打开控制台

Answer 1

来自角度材料文档

延迟加载 默认情况下，选项卡内容是急切加载的。急切加载的选项卡将初始化子组件，但在激活选项卡之前不会将它们注入 DOM

问题是在用户激活选项卡之前cy不会附加 div，但组件正在初始化并尝试访问div，这是导致错误的原因，要解决此问题，您可以使用组件，这将导致组件在选项卡之前无法初始化由用户激活。DOMDataCytoscapeComponentcylazy load DataCytoscapeComponent

<mat-tab label="Graph">
  <ng-template matTabContent>
    <app-data-cytoscape></app-data-cytoscape>
  </ng-template>
</mat-tab>

这里是工作示例

注意：单击选项卡时图表不可见，因为设置为 0，所以我在组件 cssheight中设置了默认值并删除了定位。min-heightabsolute