Question

您如何知道是否已渲染惰性加载的组件？我有以下HTML：

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      Panel Summary
    </mat-expansion-panel-header>
    <ng-template matExpansionPanelContent>
      <some-component></some-component>
    </ng-template>
  <mat-expansion-panel>

  .... more panels with the same component

<mat-accordion>

默认情况下，面板是关闭的，因此<some-component>尚未呈现。

然后在打字稿中我有以下代码：

@Component({
  selector: 'main-component',
  templateUrl: './main-component.html',
  style: ''
})
export class mainComponent implements OnInit {

  @ViewChild(SomeComponent, {static: false})
  someComponent: SomeComponent;

  onButtonClick() {
     this.someComponent.update();
  }

说尚未打开面板，并且用户单击按钮时出现以下错误：

mainComponent.html: ERROR TypeError: Cannot read property 'update' of undefined

我知道这是因为尚未加载实际的组件，因此我们正在尝试调用其函数。我想保持懒惰地加载面板，以减少因在角材扩展面板中放置动态物体而导致的性能问题。

我只能想到一个解决方案，它不会延迟加载，这实际上不是一个选择。还有其他解决方案吗？有没有办法知道ViewChild是否未定义，或者有一个标志位viewChild会告诉您是否找到了这些组件？

Answer 1

如果未真正加载组件，那么如何期望对其进行调用？什么是SomeComponent？

我能想到的一件事就是这样的：

service endpoints

您需要在SomeComponent中实现updateOnOpen输入。

使用父级的ViewChild访问嵌套在ngTemplate中的组件

1 个答案: