很好用的resizeObserver笔记

标签：步骤 元素 笔记 Element nodeEl resizeObserver ElementRef

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  Input,
  OnChanges, OnDestroy,
  OnInit,
  ViewEncapsulation,ViewChild,ElementRef
} from '@angular/core';

export class ChartComponent implements OnInit {
  //① 在页面元素中添加 如 #node ,注意：这里的类型为ElementRef!去往步骤②
  @ViewChild("node")nodeRef:ElementRef;
  nodeEl:Element
  private resizeObserver: ResizeObserver;
  constructor() {
  }
  
  ngOnInit() {}
  ngAfterViewInit(){
    //①'重要：由于ngOnInit时页面尚未初始化完成，所以可能无法获取到用ViewChild定位到的元素而产生错误，这里将其放在ngAfterViewInit来执行！！
    this.start2ResizeObserver();
  }
  //⑤是的，还有步骤⑤，这里要将resizeObserver订阅的变化取消掉，当然是在destroy啦!需要特别注意的是，如果使用unobserve结束一个指定的 Element 或 SVGElement 的观察。也会出现元素不存在的状况，这里直接粗暴地断开观察的连接就可以解决报错了！
  ngOnDestroy(){
    this.resizeObserver.disconnect();
  }

  private start2ResizeObserver() {
    this.nodeEl=this.nodeRef.nativeElement;
    /*步骤③：
    创建一个ResizeObserver实例，这里返回的参数是整个(当前)页面中查询到的指定元素，即 nodeEl,或者用querySelector<All>查询到的元素集合。
    故而entiers是一个数组！
    在使用时可以遍历数组获取其中节点做处理，此处仅做对一个元素的处理！
    */
    this.resizeObserver = new ResizeObserver(entires => {
      if(entires?.length){
        /*去往步骤④做对元素的处理*/
        this.resizeContent(entiers[0]);
      }
    });
    /* 监听页面元素，这里需要获取到元素的形式是 Element 由于项目要谨慎使用document，这里直接不让用，那么就只能用@ViewChild,过程见 ①，
    步骤②：resizeObserver.observe中需要的元素类型为Element,将ElementRef转化为Element使用是使用ElementRef.nativeElement,创建变量nodeEl接住这种类型转换的值
    去往步骤③
    */
    this.resizeObserver.observe(this.nodeEl);
  }

  /*④对元素做处理，去往步骤⑤*/
  private resizeContent(entier) {
    console.log('打印出来看看就知道要用到哪个属性啦！',entier)
    this.ref.detectChanges();
  }
}

标签：步骤,元素,笔记,Element,nodeEl,resizeObserver,ElementRef
From： https://www.cnblogs.com/qingsui/p/16582725.html