我正在尝试为 cytoscape 中内置的图形创建一个单独的角度组件。现在我试图在 Angular 的另一个组件中使用相同的组件,但它没有做任何事情。它还给了我一个错误错误 - 无法读取 null 的属性“className”
这是 Stackblitz:
单击图形并打开控制台
我正在尝试为 cytoscape 中内置的图形创建一个单独的角度组件。现在我试图在 Angular 的另一个组件中使用相同的组件,但它没有做任何事情。它还给了我一个错误错误 - 无法读取 null 的属性“className”
这是 Stackblitz:
单击图形并打开控制台
来自角度材料文档
延迟加载 默认情况下,选项卡内容是急切加载的。急切加载的选项卡将初始化子组件,但在激活选项卡之前不会将它们注入 DOM
问题是在用户激活选项卡之前cy
不会附加 div,但组件正在初始化并尝试访问div,这是导致错误的原因,要解决此问题,您可以使用组件,这将导致组件在选项卡之前无法初始化由用户激活。DOM
DataCytoscapeComponent
cy
lazy load
DataCytoscapeComponent
<mat-tab label="Graph">
<ng-template matTabContent>
<app-data-cytoscape></app-data-cytoscape>
</ng-template>
</mat-tab>
这里是工作示例
注意:单击选项卡时图表不可见,因为设置为 0,所以我在组件 cssheight
中设置了默认值并删除了定位。min-height
absolute