0

I have a group of tabs in Angular material tab group as below and calling a method setGridHeight in every component ( every tab ).

<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>

So in the TS code in every component I am calling a method called setGridHeight which is called on tab change.

The issue is if I control the components redering through *ngIf, the selectedtabChange call throws an error ( since it cant call a method of an unrendered component( unrendered tab) )

How do I then change the call to only methods from only rendered components ( tabs ).

for ex: showQueues = [true, false, true];

showQueues[1] = false and is not rendered and thus queue1.setGridHeight() throws an exception Cannot read property 'setGridHeight' of undefined.

4

3 回答 3

0

检查“queue1”是否未定义且不为空：

If (undefined !== queue1 && queue1 != null) {
  queue1.setGridHeight();
}
于 2018-10-29T17:15:45.003 回答
0

最快的解决方案之一是更改*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>
于 2018-10-29T16:51:32.627 回答
0

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

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

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

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

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

在这里演示

于 2018-10-29T17:29:32.363 回答