时间戳

首页 > 解决方案 > 如何在角度 6 中通过 id 获取 mat-tab 元素？

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

问题描述

我正在尝试获取带有 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]);
   }
}

堆栈闪电战：

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

标签： angular6getelementbyidmat-tab

解决方案

在

<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 元素

推荐阅读