我试图获得一个带有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
在
<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元素
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
}