Cytoscape.js Graph 不在嵌套的 angular 组件中运行错误 - 无法读取 null 的属性“className”

问题描述

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

这里是 Stackblitz：

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

点击图表并打开控制台

解决方法

来自angular-material doc

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

问题是 cy div 没有附加到 DOM，直到用户激活选项卡，但 DataCytoscapeComponent 组件正在初始化并尝试访问 cy div，这是错误的原因，要解决这个问题，您可以lazy load DataCytoscapeComponent 组件，这将导致组件在用户激活选项卡之前不会初始化。

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

这里的工作example

注意：点击选项卡时图表不可见，因为 height 设置为 0，所以我在组件 css 中设置了默认 min-height 并删除了 {{1} } 定位。