Угловой материал - точно знать, какая вкладка была выбрана - PullRequest
Новая
       7

Угловой материал - точно знать, какая вкладка была выбрана

0 голосов
/ 01 ноября 2018

Так что, возможно, я пропустил что-то очевидное в документах, но я просто ищу простой способ найти вкладку, выбранную в следующем сценарии:

View 

<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab *ngIf="true" label="Label1">Content 1</mat-tab>
  <mat-tab *ngIf="false" label="Label2">Content 2</mat-tab>
  <mat-tab *ngIf="true" label="Label3">Content 3</mat-tab>
</mat-tab-group>

Очевидно, что условия являются динамическими в моем реальном коде. Это только для образца.

Сценарий 

onTabChange(event: MatTabChangeEvent) {
  // ?
}

Выпуск

В приведенном выше сценарии event.index вернет 0, если я нажму первую вкладку, и 1, если я нажму третью вкладку , потому что вторая не отображается из-за *ngIf.

Для меня это имеет смысл, однако очень трудно узнать , на какой вкладке фактически нажимали в зависимости от того, какие из них были показаны для начала.

Я мог бы либо:

  • повторите тест для каждого состояния вкладки в onTabChange, чтобы определить, какой индекс соответствует какой вкладке,
  • (вероятно) привязывает ссылку ViewChild(ren) к чему-либо и извлекает данные (например, атрибуты data-) через их собственные элементы DOM.

Обе эти опции кажутся слишком излишними.

Вопрос

В вышеприведенном коде, какой будет правильный способ узнать, что, скажем, была нажата вкладка, помеченная Label3, без проверки самой метки (что, очевидно, было бы ужасно)?

Простой Stackblitz , если это может помочь.

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

На самом деле отвечаю сам дважды, потому что я думаю, что это решение также интересно и, вероятно, ближе всего (пока) к тому, что я ищу:

View 

<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab *ngIf="true" label="tab1">
    <ng-template mat-tab-label>Label 1</ng-template>
    Content 1
  </mat-tab>
  <mat-tab *ngIf="false" label="tab2">
    <ng-template mat-tab-label>Label 2</ng-template>
    Content 2
  </mat-tab>
  <mat-tab *ngIf="true" label="tab3">
    <ng-template mat-tab-label>Label 3</ng-template>
    Content 3
  </mat-tab>
</mat-tab-group>

Сценарий 

onTabChange(event: MatTabChangeEvent) {
  const tabName = event.tab.textLabel;
  // ...
}

По сути, для добавления текстовой метки (заголовка) на вкладку используется другой способ, используя <ng-template>, который, кажется, имеет приоритет над атрибутом label.

Этот последний атрибут может поэтому использоваться для хранения «программного» имени вкладки (в отличие от ее открытого текста) и может быть легко получен на стороне сценария.

0 голосов
/ 01 ноября 2018

Не совсем то, что я искал, но вот лучшее решение, которое я нашел за это время:

View 

<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab *ngIf="true" data-name="tab1" label="Label1">Content 1</mat-tab>
  <mat-tab *ngIf="false" data-name="tab2" label="Label2">Content 2</mat-tab>
  <mat-tab *ngIf="true" data-name="tab3" label="Label3">Content 3</mat-tab>
</mat-tab-group>

Сценарий 

onTabChange(event: MatTabChangeEvent) {
  const tabName = event.tab.content.viewContainerRef.element.nativeElement.dataset.name;
  // ...
}

Выглядит немного хакерски (и очень многословно), но делает свою работу.

PS: спасибо @GreenMonkeyBoy на Gitter за помощь в поиске этого!

...