访问嵌套在 ngTemplate 中的组件，其中包含来自父级的 ViewChild

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

如果您的组件实际上没有加载，那么您如何期望对其调用更新？什么是某个组件？

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

<mat-accordion>
<mat-expansion-panel #someComponentExpansionPanel>
<mat-expansion-panel-header>
Panel Summary
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<some-component [updateOnOpen]="updateOnOpen"></some-component>
</ng-template>
<mat-expansion-panel>
.... more panels with the same component
<mat-accordion>
@Component({
selector: 'main-component',
templateUrl: './main-component.html',
style: ''
})
export class mainComponent implements OnInit {
@ViewChild(SomeComponent, {static: false})
someComponent: SomeComponent;
@ViewChild('someComponentExpansionPanel', {static: false})
someComponentExpansionPanel: MatExpansionPanel;
private _updateOnOpen = false;
get updateOnOpen(): boolean {
return this._updateOnOpen;
}
onButtonClick() {
if ( this.someComponent ) {
this.someComponent.update();
} else {
this._updateOnOpen = true;
this.someComponentExpansionPanel.open();
}
}

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