Angular：仅为呈现的选项卡调用 SelectedTabChange答案

【问题标题】：Angular: Calling SelectedTabChange only for rendered tabsAngular：仅为呈现的选项卡调用 SelectedTabChange
【发布时间】：2018-10-29 16:45:34
【问题描述】：

我在 Angular 材质选项卡组中有一组选项卡，如下所示，并在 每个组件（每个选项卡）中调用 setGridHeight 方法。

<mat-tab-group [dynamicHeight]="true" (selectedTabChange)='queue0.setGridHeight();queue1.setGridHeight();queue2.setGridHeight();'>
  <mat-tab *ngIf='showQueues[0]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/0" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-0 #queue0 [rowData]="queue0Items$ | async">
    </fph-queue-0>
  </mat-tab>
  <mat-tab *ngIf='showQueues[1]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/1" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-1 #queue1 [rowData]="queue1Items$ | async">
    </fph-queue-1>
  </mat-tab>
  <mat-tab *ngIf='showQueues[2]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/2" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-2 #queue2 [rowData]="queue2Items$ | async">
    </fph-queue-2>
  </mat-tab>
</mat-tab-group>

因此，在每个组件的 TS 代码中，我调用了一个名为 setGridHeight 的方法，该方法在选项卡更改时调用。

问题是如果我通过*ngIf 控制组件重新渲染，selectedtabChange 调用会引发错误（因为它不能调用未渲染组件的方法（未渲染选项卡））

然后我如何将调用更改为仅来自仅呈现的组件（选项卡）的方法。

例如： showQueues = [true, false, true];

showQueues[1] = false 并且未呈现，因此queue1.setGridHeight() 引发异常 Cannot read property 'setGridHeight' of undefined.

【问题讨论】：

标签： angular typescript rendering angular-material2 mat-tab

【解决方案1】：

最快的解决方案之一是将*ngIf 更改为[hidden]

<mat-tab-group [dynamicHeight]="true" (selectedTabChange)='queue0.setGridHeight();queue1.setGridHeight();queue2.setGridHeight();'>
  <mat-tab [hidden]='!showQueues[0]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/0" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-0 #queue0 [rowData]="queue0Items$ | async">
    </fph-queue-0>
  </mat-tab>
  <mat-tab [hidden]='!showQueues[1]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/1" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-1 #queue1 [rowData]="queue1Items$ | async">
    </fph-queue-1>
  </mat-tab>
  <mat-tab [hidden]='!showQueues[2]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/2" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-2 #queue2 [rowData]="queue2Items$ | async">
    </fph-queue-2>
  </mat-tab>
</mat-tab-group>

【讨论】：

【解决方案2】：

检查‘queue1’是否未定义且不为空：

If (undefined !== queue1 && queue1 != null) {
  queue1.setGridHeight();
}

【讨论】：

【解决方案3】：

理想情况下，您应该将单个模板变量名称设置为所有选项卡内容，例如 #queue，然后使用 ViewChildren 查询所有呈现的组件，如下所示

@ViewChildren('queue', {read: ViewContainerRef}) queue;

ViewContainerRef 必须获取该组件的引用。

它将返回具有#queue 模板变量的渲染选项卡，现在您可以轻松地在selectedTabChange 事件上循环每个选项卡。

onTabChanged () {
    this.queue.forEach(q => q.setGridHeight());
}

Demo Here

【讨论】：