Angular 2从指令

时间:2016-12-29 10:54:40

标签: javascript angular typescript angular2-directives angular2-components

我需要使用querySelector查询文档中的元素,因为我无法提供与该指令所用元素不在同一组件中的元素的任何引用。

问题在于,无论我使用什么生命周期挂钩,指令都找不到具有某个类的元素,该类在其使用的指令的组件之外。

我已尝试AfterContentInitAfterViewInit,但没有运气。

这是一个简单的例子:

组件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;
}

0 个答案:

没有答案