Angular中使用ResizeObserver监听Html Element宽度变化（支持IE）
1. dependency：2.使用：3. 注意事项：1. dependency：
"resize-observer-polyfill": "^1.5.1",
2.使用：
import {ChangeDetectionStrategy,ChangeDetectorRef,Component,Input,OnChanges, OnDestroy,OnInit,ViewEncapsulation} from '@angular/core';import ResizeObserver from 'resize-observer-polyfill';import {CommonService} from "../services/common.service";export class ChartComponent implements OnInit {public normalPCMode: boolean = false;public smallPCMode: boolean = false;private resizeObserver: ResizeObserver;constructor(public common: CommonService, public ref: ChangeDetectorRef) {}ngOnInit() {this.start2ResizeObserver();}private start2ResizeObserver() {let that = this;this.resizeObserver = new ResizeObserver(() => {that.resizeContent();});this.resizeObserver.observe(document.body);}private resizeContent() {this.smallPCMode = mon.isSmallPC();this.normalPCMode = mon.isNormalPC();this.ref.markForCheck();if (mon.isIE()) {ChartComponent.handleIEResizeContent();}this.ref.detectChanges();}private static handleIEResizeContent() {//do something for IE}}import {Injectable} from '@angular/core';@Injectable({providedIn: 'root'})export class CommonService {public isMobile() {return window.innerWidth <= 900;}public isSmallPC() {return window.innerWidth > 900 && window.innerWidth < 1440;}public isNormalPC() {return window.innerWidth >= 1440;}public isIE() {return ((window as any).ActiveXObject || "ActiveXObject" in window);}}
3. 注意事项：
**// A. this在这里的作用域**private start2ResizeObserver() {let that = this;this.resizeObserver = new ResizeObserver(() => {that.resizeContent();});this.resizeObserver.observe(document.body);}**// B. this.resizeObserver.observe(param)此处的param可以是任何Html Element标识符（div也是）， 不局限于document.body**//比如：let target = document.querySelector('chart');if (isElement(target)) {this.resizeObserver.observe(target);}**// C. 这种方式支持IE**
