Question

我正在尝试获取具有其id的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

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

如果要查找HTMLElement，可以将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
}

如何通过角度6中的id获取mat-tab元素？

2 个答案: