-1

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

这是 Stackblitz:

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

单击图形并打开控制台

4

1 回答 1

1

来自角度材料文档

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

问题是在用户激活选项卡之前cy不会附加 div,但组件正在初始化并尝试访问div,这是导致错误的原因,要解决此问题,您可以使用组件,这将导致组件在选项卡之前无法初始化由用户激活。DOMDataCytoscapeComponentcylazy load DataCytoscapeComponent

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

这里是工作示例

注意:单击选项卡时图表不可见,因为设置为 0,所以我在组件 cssheight中设置了默认值并删除了定位。min-heightabsolute

于 2021-03-10T14:44:46.890 回答