角- ViewChild对document.querySelector
我寻找在角度上访问DOM元素的正确方法。
我正在处理一个示例，它需要访问DOM元素，因为我希望更改我的offsetTop和scrollTop属性的HTMLElements。
通过使用document.querySelector('.my-query-class')在ngAfterViewInit()中查询DOM元素，我成功地实现了我想要的特性。唯一的问题是我在查询一个div元素，它有一个特定的CSS类。包含这个CSS类的div-元素会发生变化。这意味着:有多个div-元素，它们的CSS类由[ngClass] = {'.my-query-class': condition}提供.条件在单击另一个div时发生变化。因此，我必须在单击侦听器中更新赋值myDOMElement = document.querySelector('.my-query-class')。我希望这是比较清楚的。在我的打字本文件中，我基本上做了以下工作：
myDOMelement?: HTMLElement;
ngAfterViewInit() {
myDOMElement = document.querySelector('.my-query-class') as HTMLElement;
}
onClick() {
myDOMElement = document.querySelector('.my-query-class') as HTMLElement;
if (myDOMElement !== undefined) {
doSomething();
}
}现在，尽管这很好，但我有一种感觉，我不能用document.querySelector()来解决我的问题。这就是为什么我正在寻找一个替代的角度提供。我偶然发现了ViewChild装饰师，并试图使用它实现我的特性：
@ViewChild('.my-query-class') myDOMElementRef?: ElementRef;
myDOMElement?: HTMLElement;
ngAfterInitView() {
myDOMElement = myDOMElementRef.nativeElement;
}
onClick() {
if (myDOMElement !== undefined) {
doSomething();
}
}不过，myDOMElement似乎还没有定义。显然，我不明白使用ViewChild的正确方式。有人能解释一下吗？
回答 2
Stack Overflow用户
发布于 2022-05-01 08:56:05
我不是角质专家，但我发现这是一个常见的问题。
如果您使用id，则视图子程序似乎有效。
我给你一个代码，它是有效的:)
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-question4',
template: `
<p #idElem class="idElem my-query-class">question4 works!</p>
<button (click)="onButtonClick()">Button</button>
`,
styleUrls: ['./question4.component.sass']
})
export class Question4Component implements AfterViewInit {
myDOMelement?: HTMLElement;
constructor() { }
// @ViewChild('.my-query-class') myDOMElementRef?: ElementRef;
@ViewChild('idElem') myDOMElementRef?:ElementRef;
ngAfterViewInit() {
this.myDOMelement = document.querySelector('.my-query-class') as HTMLElement;
console.log("this.myDOMElementRef");
console.log(this.myDOMelement);
console.log(this.myDOMElementRef);
}
onButtonClick(): void {
console.log("button clicked!!");
console.log(this.myDOMelement);
console.log(this.myDOMElementRef);
}
}Stack Overflow用户
发布于 2022-05-01 19:15:49
如果您使用ViewChild访问角中的元素，则必须为该元素提供模板引用。
<div #queryElem class="my-query-class"></div>在TS文件中
ViewChild('queryElem', {static: false}) divElem: ElementRef;也不要访问ngOnInit钩子中的元素。始终访问DOMElement中的ngAfterViewInit。
请参阅此文档链接，以了解钩子
https://stackoverflow.com/questions/72075172
复制
腾讯云开发者
