观察者
IMPORT MODULE

The ObserversModule package provides convenience directives built on top of native web platform observers, such as MutationObserver.

Examples

Basic Usage

Simplest of usage.

expand codeexpand code
import { Component } from '@angular/core';

import { ChartEChartsEvent, ChartEChartsOption } from '@delon/chart/chart-echarts';

@Component({
  selector: 'components-observers-basic',
  template: `
    <div class="mb-md">
      <button nz-button (click)="addWidth()">Add width of div element</button>
      <button nz-button (click)="reduceWidth()">Reduce width of div element</button>
    </div>
    <div (observeSize)="echart?.chart?.resize()" [style.width.px]="width">
      <chart-echarts #echart [option]="option" (events)="handleEvents($event)"></chart-echarts>
    </div>
  `
})
export class ComponentsObserversBasicComponent {
  width = 200;

  option: ChartEChartsOption = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        detail: {
          formatter: '{value}'
        },
        data: [
          {
            value: 50,
            name: 'SCORE'
          }
        ]
      }
    ]
  };

  handleEvents(ev: ChartEChartsEvent): void {
    console.log(ev);
  }

  addWidth(): void {
    this.width += 100;
  }

  reduceWidth(): void {
    this.width -= 100;
  }
}

API

observeSize

Watch the DOM size change.

PropertyDescriptionTypeDefaultGlobal Config
(observeSize)EventMutationRecord[]-