代码之家 › 专栏 › 技术社区 › Al-Mothafar

角饼图的剑道用户界面对ChangeDetectionStrategy.OnPush没有响应

kendo-angular-ui kendo-chart angular-components angular

0

Al-Mothafar · 技术社区 · 7 年前

ChangeDetectionStrategy 到 ChangeDetectionStrategy.OnPush ,我这样做的原因是,即使没有问题,也不会持续存在,但调整大小开始滞后,并在此期间消耗更多的CPU使用量。

变更检测策略 让图表停留在第一次渲染。

另外,我得到了很多类型的图表,比如条形图,而这类图表似乎并没有出现问题,现在,它只针对我的饼图。

我的组件:

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) {
  }
}

<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>

我的组件.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;
  }
}

1 回复 | 直到 6 年前

1

0

Al-Mothafar 7 年前

如果你有组件 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
      });
  }
}