Angular: вызов SelectedTabChange только для визуализированных вкладок - PullRequest
Новая
       9

Angular: вызов SelectedTabChange только для визуализированных вкладок

0 голосов
/ 29 октября 2018

У меня есть группа вкладок в группе вкладок Угловой материал, как показано ниже, и вызываю метод 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.

Ответы [ 3 ]

0 голосов
/ 29 октября 2018

Проверьте, не является ли 'queue1' неопределенным и не нулевым: 

If (undefined !== queue1 && queue1 != null) {
  queue1.setGridHeight();
}
0 голосов
/ 29 октября 2018

В идеале вы должны установить одно имя переменной шаблона для всего содержимого вкладки, например #queue, а затем после запроса всех отображаемых компонентов использовать ViewChildren, как показано ниже 

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

ViewContainerRef должен получить ссылку на этот компонент.

Она вернет визуализированную вкладку с шаблонной переменной #queue, теперь вы можете легко перебрать каждую вкладку в событии selectedTabChange. 

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

Демо Здесь

0 голосов
/ 29 октября 2018

Одним из самых быстрых решений было бы изменить *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>
...