很好用的resizeObserver笔记

2022-08-13 12:02:03 阅读：118 来源： 互联网

标签：步骤元素笔记 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
来源： https://www.cnblogs.com/qingsui/p/16582725.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

很好用的resizeObserver笔记