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

export class ChartComponent implements OnInit {
  //① 在頁(yè)面元素中添加 如 #node ,注意：這里的類(lèi)型為ElementRef!去往步驟②
  @ViewChild("node")nodeRef:ElementRef;
  nodeEl:Element
  private resizeObserver: ResizeObserver;
  constructor() {
  }
  
  ngOnInit() {}
  ngAfterViewInit(){
    //①'重要：由于ngOnInit時(shí)頁(yè)面尚未初始化完成，所以可能無(wú)法獲取到用ViewChild定位到的元素而產(chǎn)生錯(cuò)誤，這里將其放在ngAfterViewInit來(lái)執(zhí)行！！
    this.start2ResizeObserver();
  }
  //⑤是的，還有步驟⑤，這里要將resizeObserver訂閱的變化取消掉，當(dāng)然是在destroy啦!需要特別注意的是，如果使用unobserve結(jié)束一個(gè)指定的 Element 或 SVGElement 的觀察。也會(huì)出現(xiàn)元素不存在的狀況，這里直接粗暴地?cái)嚅_(kāi)觀察的連接就可以解決報(bào)錯(cuò)了！
  ngOnDestroy(){
    this.resizeObserver.disconnect();
  }

  private start2ResizeObserver() {
    this.nodeEl=this.nodeRef.nativeElement;
    /*步驟③：
    創(chuàng)建一個(gè)ResizeObserver實(shí)例，這里返回的參數(shù)是整個(gè)(當(dāng)前)頁(yè)面中查詢(xún)到的指定元素，即 nodeEl,或者用querySelector<All>查詢(xún)到的元素集合。
    故而entiers是一個(gè)數(shù)組！
    在使用時(shí)可以遍歷數(shù)組獲取其中節(jié)點(diǎn)做處理，此處僅做對(duì)一個(gè)元素的處理！
    */
    this.resizeObserver = new ResizeObserver(entires => {
      if(entires?.length){
        /*去往步驟④做對(duì)元素的處理*/
        this.resizeContent(entiers[0]);
      }
    });
    /* 監(jiān)聽(tīng)頁(yè)面元素，這里需要獲取到元素的形式是 Element 由于項(xiàng)目要謹(jǐn)慎使用document，這里直接不讓用，那么就只能用@ViewChild,過(guò)程見(jiàn) ①，
    步驟②：resizeObserver.observe中需要的元素類(lèi)型為Element,將ElementRef轉(zhuǎn)化為Element使用是使用ElementRef.nativeElement,創(chuàng)建變量nodeEl接住這種類(lèi)型轉(zhuǎn)換的值
    去往步驟③
    */
    this.resizeObserver.observe(this.nodeEl);
  }

  /*④對(duì)元素做處理，去往步驟⑤*/
  private resizeContent(entier) {
    console.log('打印出來(lái)看看就知道要用到哪個(gè)屬性啦！',entier)
    this.ref.detectChanges();
  }
}