我需要使用querySelector
查询文档中的元素,因为我无法提供与该指令所用元素不在同一组件中的元素的任何引用。
问题在于,无论我使用什么生命周期挂钩,指令都找不到具有某个类的元素,该类在其使用的指令的组件之外。
我已尝试AfterContentInit
和AfterViewInit
,但没有运气。
这是一个简单的例子:
组件1:
<div class="class1"></div>
<div myDirective [classesToQuery]="['class1', 'class2']"></div>
组件2:
<div class="class2">Hero</div>
指令:
ngAfterContentInit() {
this.waypoint = this.getWaypointTotal();
}
queryElementsByClasses(): any[] {
let queriedElements: any[] = [];
for (let query of this.classesToQuery) {
const element: any = document.querySelector('.' + query);
if (element) {
queriedElements.push(element);
}
};
return queriedElements;
}
getWaypointTotal(): any {
let total: number = 0;
let elements: any[] = this.queryElementsByClasses();
for (let element of elements) {
const height: number = element.offsetHeight;
total = total + height;
};
return total;
}