Ionic纯组件中ion-toggle与ion-datetime点击前为空问题求助

嘿，我来帮你搞定这个表单点击后才填充的问题～咱先捋清楚根源：你的组件用了ChangeDetectionStrategy.OnPush，这个变更检测策略的“规矩”很明确——只有当输入属性的引用发生完全替换，或者组件内部触发了点击、输入这类事件时，Angular才会执行变更检测。

如果父组件只是修改了param对象的内部属性（比如this.param.age = 25），而没有替换整个param的引用，你的纯组件根本感知不到数据变化，所以初始状态下表单是空的；直到你点击组件触发了内部事件，变更检测才会启动，这时候才会读取到param的最新数据，表单才被填充。

下面给你几个实用的解决方案，按推荐程度排序：

方案1：更新param时替换整个对象引用 #

这是最符合OnPush设计理念的做法，在父组件里更新数据时，不要直接修改对象内部属性，而是创建一个新的对象：

// 父组件中更新param的正确姿势
// 用扩展运算符生成新对象
this.param = { ...this.param, username: '新用户名' };

// 或者用Object.assign
this.param = Object.assign({}, this.param, { age: 25 });

这样每次更新都会生成全新的对象引用，OnPush组件会立刻感知到输入变化，自动触发变更检测，表单就能及时渲染出来了。

方案2：手动触发变更检测 #

如果你没办法修改父组件的更新逻辑，可以在当前组件里注入ChangeDetectorRef，手动告诉Angular需要检查数据变化：

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

@Component({
  selector: "my-pure-component",
  templateUrl: "template.html",
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ObservationComponent {
  private _param;

  @Input() 
  set param(newParam) {
    this._param = newParam;
    // 标记组件需要进行变更检测
    this.cdr.markForCheck();
  }
  get param() {
    return this._param;
  }

  constructor(private cdr: ChangeDetectorRef) {}
}

另外，如果父组件能把param转换成Observable，用async管道也是个好办法——async管道会自动帮你处理变更检测：

// 父组件中把param转为Observable
import { BehaviorSubject } from 'rxjs';

// 初始化参数
private paramSubject = new BehaviorSubject(initialParamValue);
param$ = this.paramSubject.asObservable();

// 更新数据时发送新值
this.paramSubject.next({ ...this.paramSubject.value, email: 'new@example.com' });

// 模板中使用async管道传递给子组件
<my-pure-component [param]="param$ | async"></my-pure-component>

方案3：监听属性变化并手动检测（适合特殊场景） #

如果上述方案都用不了，可以借助ngOnChanges钩子，自己对比参数的前后变化，然后触发变更检测：

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

@Component({
  selector: "my-pure-component",
  templateUrl: "template.html",
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ObservationComponent {
  @Input() public param;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes['param']) {
      const prevParam = changes['param'].previousValue;
      const currParam = changes['param'].currentValue;
      // 浅比较对象内部属性是否变化
      if (prevParam && currParam && !this.isShallowEqual(prevParam, currParam)) {
        this.cdr.markForCheck();
      }
    }
  }

  // 实现浅比较逻辑
  private isShallowEqual(obj1: any, obj2: any): boolean {
    const keys = Object.keys(obj1);
    for (const key of keys) {
      if (obj1[key] !== obj2[key]) {
        return false;
      }
    }
    return Object.keys(obj2).length === keys.length;
  }
}

不过这个方案需要自己写比较逻辑，不如前两个简洁，只适合没法修改父组件逻辑的特殊情况。

内容的提问来源于stack exchange，提问作者xurei