使用來自 Parent 的 ViewChild 訪問嵌套在 ngTemplate 中的組件

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>還沒有被渲染。

然后在 typescript 我有以下代碼：

@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

我知道這是因為實際組件尚未加載，我們正試圖調用它的 function。 我想保持延遲加載面板，以減少在 angular 材料擴展面板中具有動態事物的性能問題。

我只能想到一個解決方案，它不是延遲加載，這不是一個真正的選擇。 還有其他解決方案嗎？ 有沒有辦法知道 ViewChild 是否未定義，或者是否有一個標志 viewChild 會告訴你它是否找到了這些組件？

Answer 1

如果您的組件實際上沒有加載，那么您怎么能期望調用它的更新呢？ 什么是 SomeComponent？

我能想到你可以做的一件事是這樣的：

<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 輸入。