Question

我在触发Angular（6）的onChanges生命周期挂钩时遇到问题。在从一个组件向一个指令发出参数时，我想挂钩这些变化。

触发器在一维变量上完美运行，而对象未正确触发。特别是如果将多维对象的一部分发送到子指令。至少它可以工作，但OnChange钩子只触发一维变量。

仔细看看StackBlitz，我提供了一个可执行的例子。介意打开控制台，看看，哪个生命周期被触发： https://stackblitz.com/edit/angular-vhaews

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  public paramNumber;
  public paramObject;

  ngOnInit() {
    this.paramObject = {
      x: 10,
      y: 10
    };
    this.paramNumber = 42;
  }
}

app.component.html

<div appCanvas [paramObject]="paramObject" [paramNumber]="paramNumber"></div>

ParamObject X
<input name="paramObject.x" type="number" [(ngModel)]="paramObject.x"/>
<br>
ParamObject Y
<input name="paramObject.y" type="number" [(ngModel)]="paramObject.y"/>
<pre>{{paramObject | json}}</pre>

ParamNumber
<input name="paramNumber" type="number" [(ngModel)]="paramNumber"/>
<pre>{{paramNumber | json}}</pre>

canvas.directive.ts

import { Directive, ElementRef, Input, OnInit, OnChanges } from '@angular/core';

@Directive({
  selector: '[appCanvas]'
})
export class CanvasDirective implements OnInit, OnChanges {

  @Input() private paramObject;
  @Input() private paramNumber;

  ngOnChanges() {
    console.log(`changed object`, this.paramObject);
    console.log(`changed number`, this.paramNumber);
  }

  ngOnInit() {
    console.log(`changed object`, this.paramObject);
    console.log(`changed number`, this.paramNumber);
  }
}

免责声明：这个问题是一个更大问题的一部分，我试图找出主要问题。所以请不要过多关注细节，它实际上是关于生命周期钩子和多维对象。

Answer 1

这是检测对象属性中的更改时的典型角度方案。看看ngDoCheck()，它可用于放置自定义更改检测逻辑。

Angular生命周期只会检测对象引用的变化。因为为什么不呢？做一个深度对象等于比较可能会影响性能！

你能做的是 -

用新实例替换对象。例如，使用Object.assign。
将自定义更改检测逻辑放入ngDoCheck()方法。

Answer 2

包装所有建议，看起来将对象属性拆分为单个变量是最佳解决方案：

<强> app.component.html

<input name="canvasParam.x" type="number" [(ngModel)]="canvasParam.x"/>

<强> canvas.directive.ts

private param;

@Input() private paramX;
@Input() private paramY;


ngOnChanges() {
  this.param = {
    x: this.paramX,
    y: this.paramY
  };
  console.log(`changes`, this.param);
}

OnChanges不会触发部分对象更改

2 个答案: