ng2-ChangeDetectionStrategy提升性能

ng2-ChangeDetectionStrategy提升性能

吴阳 No Comment
Angular
import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'scm-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.scss'],
  encapsulation: ViewEncapsulation.None, // 增加该元数据则会让该组件的样式应用到整个app
  changeDetection: ChangeDetectionStrategy.OnPush
})

constructor(
  private cd:ChangeDetectorRef) { }

public data = []; // 此data已在页面绑定html
public clickBtn(item){
  this.data.push(item);
  this.data = JSON.parse(JSON.stringify(this.data)); // clone数组
  this.cd.detectChanges(); // 在需要更新视图时手动触发ng的检测
}

利用这个机制可以提高性能。避免ng去全部检测(ng2默认是会去检测所有的页面节点)。

要发表评论,您必须先登录