cordova – IonicAngular 2组件事件发射器未更新视图

概述我目前正在编写Ionic 2应用程序并创建了以下自定义组件： import {Component, EventEmitter} from 'angular2/core';import {Button, Icon, Item} from 'ionic-angular';import {DatePicker} from 'ionic-native';import {HSDatePipe} fro 我目前正在编写Ionic 2应用程序并创建了以下自定义组件：

import {Component,EventEmitter} from 'angular2/core';import {button,Icon,Item} from 'ionic-angular';import {DatePicker} from 'ionic-native';import {HSDatePipe} from '../pipes/custom-dateformat.pipe';@Component({    selector: 'date-picker',directives: [button,Item],inputs: ['date','dateFormat','mode'],outputs: ['onUpdate'],pipes: [HSDatePipe],template: `<button clear (click)="selectDate()">        {{date | hsDate:dateFormat}}    </button>`})export class HSDatePicker {    date:any;    dateFormat:any;    label:string;    mode:string;    onUpdate:any = new EventEmitter();    constructor() {    }    selectDate() {        let self:any = this;        let prevIoUsDate:any = self.date;        DatePicker.show({            date: new Date(self.date),mode: self.mode        })        .then(            (date:any) => {                if (!date) {                    date = prevIoUsDate;                }                self.onUpdate.emit(date);            },err => {                console.log('error -',err);            }        );    }}

在调用此组件的页面上,我将其包含在页面中,如下所示：

<date-picker item-right [date]="period.dateEnd" [dateFormat]="'HH:mm'" [mode]="'time'" (onUpdate)="dateChange($event,'dateEnd')"></date-picker>

dateChange函数如下所示：

dateChange(e,selector) {    let newDate = moment(e);    this.transactionFilter[selector] = newDate;}

当我使用组件选择新日期时,将按照我的预期调用该函数,并更新transactionFilter对象.但是,视图不会更新,它仍会在页面上显示旧日期,直到我单击按钮或聚焦输入等.

我认为问题是与DatePicker插件或promises有关,因为如果我像这样更改selectDate()函数,它会更新.

selectDate() {    let self:any = this;    self.onUpdate.emit(new Date());}

有没有办法强制视图更新或我应该以某种方式做不同的方式？

谢谢你的帮助.

编辑：主页面的模板

@Page({    template: `    <ion-content>        <ion-toolbar primary >            <ion-Title>Transaction VIEwer Filter</ion-Title>        </ion-toolbar>        <ion-List>            <ion-item>                <ion-icon name="calendar" item-left></ion-icon>                From                <date-picker item-right [date]="transactionFilter.fromDate" [dateFormat]="'DD/MM/YYYY HH:mm'" [mode]="'datetime'" (onUpdate)="dateChange($event,'fromDate')"></date-picker>            </ion-item>            <ion-item>                <ion-icon name="calendar" item-left></ion-icon>                To                <date-picker item-right [date]="transactionFilter.toDate" [dateFormat]="'DD/MM/YYYY HH:mm'" [mode]="'datetime'" (onUpdate)="dateChange($event,'toDate')"></date-picker>            </ion-item>            <ion-item>                Count: {{count}}            </ion-item>        </ion-List>        <ion-row>            <ion-col>                <button  (click)="close()" danger block>Close</button>            </ion-col>            <ion-col>                <button  (click)="save()" favorite block>Save</button>            </ion-col>        </ion-row>    </ion-content>`,directives: [HSDatePicker]})

解决方法 我认为这是因为Angular2根据引用而不是值来检测更改.如果检测到新的日期实例,则将更新视图.如果它是相同的实例但其内容已更新,则视图将不会更新.

我会重新创建一个像这样的新日期：

DatePicker.show({  date: new Date(self.date),mode: self.mode}).then(  (date:any) => {    if (!date) {      date = prevIoUsDate;    }    self.onUpdate.emit(new Date(date.getTime()));  },err => {    console.log('error -',err);  });

编辑

您可以尝试在区域中执行处理：

export class HSDatePicker {    date:any;    dateFormat:any;    label:string;    mode:string;    onUpdate:any = new EventEmitter();    constructor(private ngzone:ngzone) { // <-------    }    selectDate() {      this.ngzone.run(() => { // <------        let self:any = this;        let prevIoUsDate:any = self.date;        DatePicker.show({            date: new Date(self.date),err);            }        );      });    }

总结

以上是内存溢出为你收集整理的cordova – Ionic / Angular 2组件事件发射器未更新视图全部内容，希望文章能够帮你解决cordova – Ionic / Angular 2组件事件发射器未更新视图所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。