2017-04-14 116 views
0

我想知道对象myObject是否已在视图中进行了修改,并为此目的我正在使用ngOnChanges。检测物体角度的变化2

这是我的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我的组件。但是到目前为止我所做的是,我无法这样做。预先感谢任何帮助!

+0

这里工作Plunker:HTTPS://plnkr.co/edit/9hlONK54nfiIEcejQouB –

+0

确实[我的答案](http://stackoverflow.com/a/43412173/2545680)有帮助吗? –

+0

对不起,我迟到的回复。但实际上,我希望在变量myObject上检测全局变化,如果可能的话,不会检测每个属性。 – edkeveked

回答

1

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

2

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

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

哪里value1Changed是组件的方法。

+0

谢谢!但是,不是分别检测每个属性是否发生了变化,只要属性发生变化,是不是可以检测到整个对象myObject已经发生了变化?因为,如果我有几个输入标签,我将不得不在所有标签中放入'(ngModelChange)=“value1Changed()' – edkeveked

0

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

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

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

您的输入使用(ngModelChange):

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

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

0

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}`); 
    } 
    } 
} 
+0

您能否使用我在上面发布的模板html制作一个plunker? – edkeveked