Question

我仍在学习Angular，并且遇到以下上下文和问题：

上下文：

我的应用程序使用大量组件，数据绑定指向具有大量属性和嵌套内容的相当大的js对象。

我使用默认更改检测策略已有一段时间，现在我想对其进行优化，因此研究了OnPush策略。

我想指出，在许多用例中，我只更改了该js对象中某处的一个属性，而不更改了其余部分，并认为以不可变的方式替换该对象不是最好的主意（我在这里可能错了）

所以我尝试了以下可行的方法，但是我想了解这是否是合法的做事方式：

https://stackblitz.com/edit/ionic-fwprdh

摘要：

我有一个组件（主页），其中所有绑定都指向数据对象：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <ion-list>
    <ion-item>{{ someObjectWithProps.prop1.subprop1 }}</ion-item>
    <ion-item>{{ someObjectWithProps.prop1.subprop2 }}</ion-item>
    <ion-item>{{ someObjectWithProps.prop2.subprop1 }}</ion-item>
  </ion-list>
  <button ion-button (click)="addLine()">add line</button>
</ion-content>

及其ts部分：

import { Component, ChangeDetectorRef } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  someObjectWithProps = {
    changed: false,
    prop1: {
      subprop1: "hi there",
      subprop2: "hi there 2"
    },
    prop2: {
      subprop1: "hi there 3",
      subprop2: "hi there 4"
    }
  }

  constructor(public navCtrl: NavController, private cdr: ChangeDetectorRef) {
  }

  addLine() {
    this.someObjectWithProps.changed = true;
    this.someObjectWithProps.prop1.subprop1 = "CHANGED!";
  }

  ngDoCheck() {
    console.log("change detection here")
    if (this.someObjectWithProps.changed) {
      this.cdr.detectChanges();
      this.someObjectWithProps.changed = false;
    }
  }

  ngOnInit() {
    console.log("init done"); 
    this.cdr.detach();
    this.cdr.detectChanges();
  }

}

所以我在做什么： -我导入ChangeDetectorRef并使用它从CD树中“分离”此组件并进行初始cd以确保呈现该组件 -然后，对于每个ngDoCheck（无论您是否分离c，都假定会调用它），我只是检查一个标志-该对象的“ changed”属性，该标志指示我是否应该手动调用detectChanges（）。

问题：从表面上看，我认为这应该比默认策略要好得多，但是我不确定是否在这里遗漏了什么，应该选择onPush并使用数据对象的“可观察”值，并以每次更改不变的方式替换它？

因此，可观察方法在这里： https://stackblitz.com/edit/ionic-8nd4ej

自定义角度检测方法

0 个答案: