Angular-ViewChildvsdocument.querySelector _编程开发

Angular-ViewChildvsdocument.querySelector

创始人

2024-10-21 09:02:14

0次

在Angular中有两种方式来获取DOM元素：ViewChild和document.querySelector。ViewChild是Angular的一个装饰器，它允许你在新版本中通过@ViewChild和@ViewChildren引用组件中的DOM元素，而不用使用原生方式来查询DOM。而document.querySelector方法是原生的js方法，它可以返回与指定的选择器或选择器中的一个或多个元素匹配的第一个元素。

下面是两种获取DOM元素的示例代码：

使用ViewChild获取DOM元素（推荐）：

@ViewChild('myElement') myElement: ElementRef;

ngAfterViewInit(): void { console.log(this.myElement.nativeElement); }

//在HTML模板中

Hello World!

使用document.querySelector获取DOM元素：

const element = document.querySelector('#myElement'); console.log(element);

//在HTML模板中

Hello World!

以上两种方法都可以获取DOM元素。使用ViewChild方法能够更好地与Angular的工作方式相匹配，而使用document.querySelector方法在一些特定的情况下也是有用的，如在没有访问Component的上下文的情况下获取DOM元素。

上一篇：Angular-useExistingngFormoptional

下一篇：Angular-VimeoAPI:ErrorNousercredentialswereprovided

Angular-ViewChildvsdocument.querySelector

相关内容

热门资讯