如何解决Cytoscape.js Graph 不在嵌套的 angular 组件中运行错误 - 无法读取 null 的属性“className”
我正在尝试为内置于 cytoscape 的图形创建一个单独的角度分量。现在我试图在 Angular 的另一个组件中使用相同的组件,但它没有做任何事情。它也给了我一个错误错误 - 无法读取 null 的属性 'className'
这里是 Stackblitz:
点击图表并打开控制台
解决方法
延迟加载 默认情况下,标签内容是急切加载的。急切加载的选项卡将初始化子组件,但在选项卡被激活之前不会将它们注入到 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} } 定位。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。