angular6中如何通过id获取mat-tab元素？

Question

我正在尝试获取一个带有 id 的 mat-tab 元素，但由于某种原因，命令 document.getElementById() returns 为 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]);
   }
}

堆栈闪电战：

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

Answer 1

在

<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

中不再有 id

如果要查找 HTML元素，可以使用 mat-tab-label-0-0 作为标签或 mat-tab-content-0-0 作为内容。

但通常 angular 你不需要得到你的 html 元素

Answer 2

Mat-Tab有id，可以用函数调用。添加一个函数，在点击时调用 html 中的 ID。

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

angular6中如何通过id获取mat-tab元素？

How to get mat-tab element by id in angular 6?

angular6

getelementbyid

mat-tab