检测物体角度的变化2

Question

我想知道对象myObject是否已在视图中进行了修改，并为此目的我正在使用ngOnChanges。

这是我的HTML

<form class="inputForm"> 
    <table id="inputFormTable"> 
     <tr> 
     <td><label>login</label></td> 
     <td><input type="text" size="40" [(ngModel)]="myObject.value1" name="value1"/></td> 
     </tr> 
     <tr> 
     <td><label>Mot de passe</label></td> 
     <td><input type="password" size="40" [(ngModel)]="myObject.value2" name="value2"/></td> 
     </tr> 
    </table> 

这是使用ngOnChanges

import {Component, OnInit, OnChanges, SimpleChanges, Input} from '@angular/core'; 
export class UtilisateurComponent implements OnInit, OnChanges { 
    @Input() myObject: any= {actif: false}; 
    ngOnChanges(changes: SimpleChanges): void { 
    for (let propName in changes) { 
     let chng = changes[propName]; 
     let cur = JSON.stringify(chng.currentValue); 
     let prev = JSON.stringify(chng.previousValue); 
     console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`); 
    } 
    } 
} 

当myObject的属性（值和值2）的变化，我想触发ngOnChanges我的组件。但是到目前为止我所做的是，我无法这样做。预先感谢任何帮助！

Answer 1

ngOnChanges在使用时@Input值对组件的更改。从我的代码中可以知道，它是你想要的ngModelChange。

Answer 2

ngOnChanges仅在myObject的值发生变化时调用，但在您的情况下它不会改变。你想要的是ngModelChange：

<input [(ngModel)]="myObject.value1" (ngModelChange)="value1Changed()"/> 

哪里value1Changed是组件的方法。

Answer 3

ngOnChanges挂钩仅在父组件的绑定属性更改并且子组件的属性使用此更改的值更新时才触发。 Read more here。

为了得到通知，当模特的属性发生变化，你就需要使用ngModelChange事件是这样的：

<input [(ngModel)]="myObject.value1" (ngModelChange)="value1Changed()"/> 

Answer 4

您的输入使用（ngModelChange）：

<input type="text" size="40" [(ngModel)]="myObject.value1" (ngModelChange)="yourCustomMethod($event)" name="value1"/> 

ngOnChanges 方法仅当父组件改变了myObject输入的对象引用时才被框架调用。

Answer 5

ngModelChanges是最好的选择检测只对输入的变化时，但如果你想检测整个应用这些变化：

import {Component, OnInit, DoCheck, SimpleChanges, Input} from '@angular/core'; 
export class UtilisateurComponent implements OnInit, DoCheck { 
    @Input() myObject: any= {actif: false}; 
    ngDoCheck(): void { 
    for (let propName in changes) { 
     let chng = changes[propName]; 
     let cur = JSON.stringify(chng.currentValue); 
     let prev = JSON.stringify(chng.previousValue); 
     console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`); 
    } 
    } 
}