Angular 2 + Ionic 2:检测对象是否被修改

问)如果我有一个对象的负载属性,所有绑定到一个窗体中的字段,当对象发生变化时如何捕获?

我不想在每个字段上放置(blur)事件,因为页面已经很重,这可能会导致页面上的听众太多。

例如

目的:

 var person = { name: string, email: string, phone: string }; 

形成:

 <input [(ngModel)]="person.name" type="text" /> <input [(ngModel)]="person.email" type="text" /> <input [(ngModel)]="person.phone" type="text" /> 

你可以使用表单对象并检查表单是否已经改变。

我知道用新的Forms模块发布了Angular2和Ionic2的最新版本,但这是我的build议。

https://angular.io/docs/ts/latest/guide/forms.html

然而,理想情况下,我需要另一种方式,如angular1 $ watch,因为还有其他方法可以更改我的复杂对象,而不仅仅是简单的input字段

我正在使用Google自动填充Component ,而我正在处理类似的问题:当用户input地址并从Googlebuild议中select一个地址时,我需要更新其他字段(如城市,省,邮编等等上)。

就像@GünterZöchbauer所说的,我创build了一个observable ,以便知道什么时候我的自动完成component发生了变化,但是第二个问题是在发生这种情况时视图没有被更新。 那是因为一些非常有趣和有力的东西叫做Zones 。 如果这个概念对你来说是新的,请参考这里和这里的一个很好的解释。

正如你可以阅读那里,

应用程序状态更改是由三件事情引起的:

1)事件 – 用户事件,如点击,更改,input,提交,…

2)XMLHttpRequests – 例如从远程服务中获取数据定时器 –

3)setTimeout(),setInterval(),因为JavaScript

事实certificate,这是Angular真正有兴趣更新视图的唯一情况。

因此,如果

还有其他方法可以改变我的复杂对象

你将不得不让Angular知道有什么改变,需要我们意识到更新的东西。 这就是我所做的:

 import {Injectable} from '@angular/core'; import {Observable} from 'rxjs/Observable'; @Injectable() export class AutocompleteService { private autocompleteObserver: any; public autocomplete: any; constructor(...) { this.autocompleteObserver = null; this.autocomplete = Observable.create(observer => { this.autocompleteObserver = observer; }); } public initializeAutocomplete(element): void { // Where all the magic happens // ... // Send informtaion back to the caller this.autocompleteObserver.next(addressInformation); } 

然后在我的页面.ts

 import { Component, NgZone } from '@angular/core'; import { AutocompleteService } from '../../providers/autocomplete-service/autocomplete-service'; @Component({ templateUrl: 'build/pages/my-new-page/my-new-page.html', directives: [FORM_DIRECTIVES], providers: [AutocompleteService] }) export class MyNewPage { constructor(..., private autocompleteService : AutocompleteService) { // Initialize all the things you need // ... this.autocompleteService.autocomplete.subscribe((addressInfo) => { this.ngZone.run(() => { // Update the fields of the form, and Angular will update // the view for you. this.updateAddress(addressInfo); }); }); } } 

所以通过在一个angular度区域内执行一些代码,你告诉Angular它需要知道这些变化,因为事情可能需要更新。