Cytoscape.js 图表不在 运行 嵌套的 angular 组件中。错误 - 无法读取 null 的 属性 'className'
Cytoscape.js Graph does not run in the nested angular component. Error - Cannot read property 'className' of null
我正在尝试为内置于 cytoscape 中的图形创建一个单独的 angular 组件。现在我试图在 Angular 的另一个组件中使用相同的组件，但它没有做任何事情。它还给了我一个错误 Error - Cannot read 属性 'className' of null
这是 Stackblitz：
单击图表并打开控制台
Lazy Loading
By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated
问题是 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，所以我在组件 [=] 中设置了默认值 min-height 33=] 并删除了 absolute 定位。
我正在尝试为内置于 cytoscape 中的图形创建一个单独的 angular 组件。现在我试图在 Angular 的另一个组件中使用相同的组件，但它没有做任何事情。它还给了我一个错误 Error - Cannot read 属性 'className' of null
这是 Stackblitz：
单击图表并打开控制台
Lazy Loading By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated
问题是 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，所以我在组件 [=] 中设置了默认值 min-height 33=] 并删除了 absolute 定位。