1

你怎么知道延迟加载的组件是否已经被渲染？我有以下 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 会告诉你它是否找到了这些组件？

4

1 回答 1

0

如果您的组件实际上没有加载，那么您怎么能期望调用它的更新呢？什么是 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 输入。

于 2019-10-17T03:03:15.540 回答