Как получить элемент mat-tab по id в угловых 6? - PullRequest
Новая
       34

Как получить элемент mat-tab по id в угловых 6?

0 голосов
/ 29 августа 2018

Я пытаюсь получить элемент mat-tab с его идентификатором, но по какой-то причине команда document.getElementById () возвращает значение null, а не элемент mat-tab. Пример:

https://stackblitz.com/edit/angular-mn5tt6

Может кто-нибудь сказать, почему это происходит, и есть ли лучший, правильный способ получения HTML-элемента?

Большое спасибо за помощь!

Мой ответ

Наилучшим способом, который я нашел для получения вкладки HTML-элемента, был следующий

HTML-файл: 

<mat-tab-group #tabGroup>
  <mat-tab label="First"> Content 1
     <button (click)="printTab(tabGroup)">click me</button>
 </mat-tab>
 <mat-tab label="Second"> Content 2 </mat-tab>
 <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

TS-файл: 

export class TabGroupBasicExample {

   @ViewChild('tabGroup') tabGroup;

   printTab(tabGroup) {
      console.log(this.tabGroup._tabs._results[0]);
   }
}

Stackblitz:

https://stackblitz.com/edit/angular-mn5tt6-ahxi4j?file=app%2Ftab-group-basic-example.ts

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Mat-Tab имеет идентификатор, вы можете вызвать его с помощью функции. Добавьте функцию, которая вызывает клики в html по клику. 

<mat-tab-group (click)="getId()">
  <mat-tab label="First" id="tab1"> Content 1
    <button (click)="printTab()">click me</button>
     </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Затем в вашем файле component.ts определите функцию. 

getId(): void {
    console.log(event.srcElement.id); //mat-tab-label-1-0 on tab1
}
0 голосов
/ 29 августа 2018

В 

<mat-tab-group>
  <mat-tab label="First" id="tab1"> Content 1
    <button (click)="printTab()">click me</button>
     </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Компоненты изменяют структуру HTML, поэтому в сгенерированном HTML больше нет идентификатора

Если вы хотите найти HTMLElement, вы можете использовать mat-tab-label-0-0 для метки или mat-tab-content-0-0 для содержимого.

Но обычно с angular вам не нужно получать html-элемент

...