Ionic/Angular 2 个组件事件发射器未更新视图
Ionic/Angular 2 component event emitter not updating view
我目前正在编写 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, Icon, 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;
}
当我使用该组件 select 一个新日期时,该函数如我所料被调用,并且 transactionFilter 对象被更新。但是,视图不会更新,它仍然会在页面上显示旧日期,直到我单击按钮或聚焦输入等。
我认为问题出在 DatePicker 插件或承诺上,因为如果我像这样更改 selectDate()
函数,它会正常更新。
selectDate() {
let self:any = this;
self.onUpdate.emit(new Date());
}
有没有办法强制更新视图,或者我应该以其他方式进行更新?
感谢您的帮助。
编辑:主页模板
@Page({
template: `
<ion-content>
<ion-toolbar primary class="subheader">
<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 class="close-modal" (click)="close()" danger block>Close</button>
</ion-col>
<ion-col>
<button class="save-modal" (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),
mode: self.mode
})
.then(
(date:any) => {
if (!date) {
date = previousDate;
}
self.onUpdate.emit(date);
},
err => {
console.log('error -', err);
}
);
});
}
我像这样更改了 selectDate()
函数,现在可以使用了。感谢蒂埃里和这位 post ionic2-camera-demo 为我指明了正确的方向。
selectDate() {
let self:any = this;
let previousDate = self.date;
DatePicker.show({
date: new Date(self.date),
mode: self.mode
})
.then(
(date:any) => {
if (!date) {
date = previousDate;
}
this.ngZone.run(() => {
self.onUpdate.emit(date);
});
},
err => {
console.log('error -', err);
}
);
}
我目前正在编写 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, Icon, 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;
}
当我使用该组件 select 一个新日期时,该函数如我所料被调用,并且 transactionFilter 对象被更新。但是,视图不会更新,它仍然会在页面上显示旧日期,直到我单击按钮或聚焦输入等。
我认为问题出在 DatePicker 插件或承诺上,因为如果我像这样更改 selectDate()
函数,它会正常更新。
selectDate() {
let self:any = this;
self.onUpdate.emit(new Date());
}
有没有办法强制更新视图,或者我应该以其他方式进行更新?
感谢您的帮助。
编辑:主页模板
@Page({
template: `
<ion-content>
<ion-toolbar primary class="subheader">
<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 class="close-modal" (click)="close()" danger block>Close</button>
</ion-col>
<ion-col>
<button class="save-modal" (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),
mode: self.mode
})
.then(
(date:any) => {
if (!date) {
date = previousDate;
}
self.onUpdate.emit(date);
},
err => {
console.log('error -', err);
}
);
});
}
我像这样更改了 selectDate()
函数,现在可以使用了。感谢蒂埃里和这位 post ionic2-camera-demo 为我指明了正确的方向。
selectDate() {
let self:any = this;
let previousDate = self.date;
DatePicker.show({
date: new Date(self.date),
mode: self.mode
})
.then(
(date:any) => {
if (!date) {
date = previousDate;
}
this.ngZone.run(() => {
self.onUpdate.emit(date);
});
},
err => {
console.log('error -', err);
}
);
}