Компонент доступа, вложенный в ngTemplate с помощью ViewChild from Parent

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?

Я могу подумать, что вы можете сделать что-то вроде этого:

<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();
     }
  }

Вам потребуется реализовать вход updateOnOpen в SomeComponent.