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

Question

I am trying to create a separate angular component for a graph built in cytoscape. Now I am trying to use the same component in the other component in Angular but it does not do anything. It also gives me an error Error - Cannot read property 'className' of null

Here is the Stackblitz:

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

Click on graph and open console

Answer 1

From angular-material doc

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

The problem is that cy div is not being attached to DOM until user activates the tab but DataCytoscapeComponent component is getting initialized and trying to access cy div which is the cause of the error, To solve this you can lazy load DataCytoscapeComponent component which will cause the component to not initialize until tab is activated by user.

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

Here the working example

Note: Graph was not visible when tab clicked because the height is getting set to 0 so i have set default min-height in component css and removed absolute positioning.