如何對使用 ViewChild 訪問的元素使用 js dom 操作

Question

我的組件.html ：

<div #container>
    <div id="target">
        something
    </div>
</div>
<button type="button" (click)="onClick()">Click</button>

我的component.ts ：

@ViewChild('container', {static: false}) container;
  onClick() {
    console.log(this.container.nativeElement.getElementById('target'));
  }

所以我想在使用 ViewChild 的元素上使用ViewChild dom 方法，它說：

container.nativeElement.getElementById` 不是 function

我該如何解決這個問題，是否有替代方法？

Answer 1

如果您需要通過 id 獲取元素，您可以使用：

document.getElementById('target') as HTMLElement;

閱讀這篇文章https://medium.com/@madhavmahesh/handling-dom-level-events-in-angular-with-typescript-dd7cda5f8307

Answer 2

您可以使用查詢選擇器獲取元素

this.container.nativeElement.querySelector("#target")。