Пользовательский интерфейс Kendo для угловых круговых диаграмм не отвечает с ChangeDetectionStrategy.OnPush

Question

Я создал новый компонент, который должен показывать круговую диаграмму в любом месте, где я размещаю этот компонент, проблема даже с простым компонентом, круговая диаграмма остается размером первого рендера, я получил эту проблему после того, как изменил ChangeDetectionStrategy на ChangeDetectionStrategy.OnPush, проблема, которую я сделал, потому что даже без проблемы не сохраняется, но изменение размера начинает отставать и потреблять больше ресурсов процессора во время этого.

Таким образом, я получил возможность сохранить эту задержку и сделать диаграмму отзывчивой, или изменить ChangeDetectionStrategy и заставить график зависнуть при первом рендеринге.

Кроме того, я получил много типов диаграмм, таких как гистограмма, и проблема, похоже, не возникает с такими диаграммами, на данный момент, это только для моей круговой диаграммы.

my.component.ts:

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  styleUrls: ['./my-component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent implements OnInit {
  public pieData: { category: string; value: number; active: boolean }[] = [
    {category: 'Complete', value: 123},
    {category: 'Work In Progress', value: 22},
    {category: 'Other', value: 5},
  ];
  constructor(private _cdRef: ChangeDetectorRef) {
  }
}

мой-component.html:

<kendo-chart [seriesColors]="['orange', '#ffe', 'green']">
  <kendo-chart-legend position="top"></kendo-chart-legend>
  <kendo-chart-series>
        <kendo-chart-series-item [type]="'pie'" [data]="pieData" [field]="'value'" [categoryField]="'category'">
</kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

мой-component.scss

:host {
  display: flex;
  overflow: hidden;
  margin: 8px;
  padding: 8px;
  flex-direction: column;

  @media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
    padding: 2px;
  }
}

Answer 1

Если вы получили компонент с changeDetection: ChangeDetectionStrategy.OnPush (что является хорошей идеей для повышения производительности), то хорошим решением будет запускать markForCheck() при каждом изменении размера окна, но с debounceTime, так что вы получите некоторое времячтобы подождать, пока вы не измените размер графика:

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  styleUrls: ['./my-component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent implements OnInit {
  constructor(private _cdRef: ChangeDetectorRef) {
  }

  ngOnInit(): void {
    fromEvent(window, 'resize') // get the event observable
      .pipe(debounceTime(200)) // you can change debounceTime to whatever you want
      .subscribe((event) => {
        this._cdRef.markForCheck(); // Here we go
      });
  }
}

Поскольку сама диаграмма кажется отзывчивой и должна перерисовываться при каждом изменении окна, это поможет.