Angular中操作DOM

• 使用ViewChildren监听DOM事件
  • 官方文档
  • You can use ViewChildren to get the QueryList of elements or directives from the view DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.
  • View queries are set before the ngAfterViewInit callback is called.
  • 用于监听使用了ngFor等指令的循环div等元素时，subscribe的changes时触发在所有ngFor元素一个个都画完之后。因此也就可用于在ngFor指令所有循环结束后触发事件处理逻辑。

<!--Tiles-->
<div id="scroll-div-showall-screenshot" class="row scroll-div" *ngIf="currentData; else assetoeeloading" infiniteScroll
  [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false">
  <div #allAssetTiles class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3 pb-3"
    *ngFor="let data of currentData; let last = last">
    <amp-oee-tile kpi="oee" [data]="data" [timeframe]="currentTimeFrame"></amp-oee-tile>
  </div>
</div>

import { Component, ElementRef, ViewChildren, QueryList, OnInit, OnDestroy, AfterViewInit } from '@angular/core';

export class OeeOverviewComponent implements OnInit, OnDestroy, AfterViewInit {
  @ViewChildren('allAssetTiles') allAssetTiles: QueryList<any>;

  ngAfterViewInit() {
    this.allAssetTiles.changes.subscribe(t => {
      this.scrollToPreviousPosition();
    });
  }
}