[英]Angular2: EventEmitter sometimes fires, sometimes not
在某些情况下会触发组件的EventEmitter
,但在其他情况下不会触发。 为什么?
我有一个自定义的日期选择器。 您可以手动更改日期( <input>
)或使用ng2-bootstrap <datepicker>
datepicker <datepicker>
方便地进行选择。
我有这个模板:
<input [(ngModel)]="dateString"
class="form-control"
(focus)="showPopup()"
(change)="inputChange()">
<datepicker class="popup" [ngClass]="{ 'popup-hidden': !showDatepicker }"
[(ngModel)]="dateModel"
[showWeeks]="true"
(ngModelChange)="hidePopup($event)">
</datepicker>
具有相关部分的组件:
export class CustomDatepickerComponent {
@Input()
dateModel: Date;
dateString: string;
showDatepicker = false;
@Output()
dateModelChange: EventEmitter<Date> = new EventEmitter();
showPopup() {
this.showDatepicker = true;
}
// Called when the date is changed manually
// It DOES fire the event
inputChange() {
let result = moment(this.dateString, 'YYYY-MM-DD');
this.update(result.toDate());
}
// Called through the DatePicker of ng-bootstrap
// It DOESN'T fire the event
// However, the showDatepicker binding takes effect (see template)
hidePopup(event: Date) {
showDatepicker = false;
this.update(event);
}
update(date: Date) {
this.dateModel = date;
this.dateString = moment(date).format('YYYY-MM-DD');
// This SHOULD fire the event
// It is called in BOTH cases!
// But it fires only when the date is changed through the <input>
this.dateModelChange.emit(this.dateModel);
}
我以这种方式使用此日期选择器:
<custom-datepicker [dateModel]="testDate" (change)="change($event)"></custom-datepicker>
这是change()
处理函数。
testDate = new Date();
change($event) { console.info('CHANGE', $event); }
有任何想法吗?
好吧...现在有点尴尬了。 这是此组件的用法:
custom-datepicker [dateModel]="testDate" (change)="change($event)"></custom-datepicker>
应更改为:
custom-datepicker [dateModel]="testDate" (dateModelChange)="change($event)"></custom-datepicker>
有趣的是,看来<input>
元素的changed
事件从CustomDatepickerComponent
起泡了。 它是在组件内部处理的,它触发了dateModelChange
,然后作为change
事件冒泡到外部组件,并以此方式进行处理。
如果我将事件传递给inputChange()
并称为event.stopPropagation()
则该事件将被取消并且不会传播。
再次:与EventEmitter
。
我有一个类似的问题。 我通过将@ainput日期模型(datemodel)与datepicker(localdate:Date;)中使用的日期模型解耦来解决它,然后使用ngOnChange来使这两个变量保持同步。 这样,EventEmitter可以正常工作,并为每个日期选择或更新发送一个值。
export class myDatepicker implements OnChanges{
localdate: Date;
@Input() datemodel: Date;
@Input() isOpen: boolean = false;
@Input() label: string;
@Input() disabled: boolean = false;
@Output() datemodelChange: EventEmitter<Date> = new EventEmitter<Date>();
// Date has been selected in Datepicker, emit event
public selectedDate(value: any) {
this.datemodelChange.emit(value);
}
// React on changes in the connected input property
ngOnChanges(changes: { [propName: string]: SimpleChange }) {
try {
if (changes["datemodel"] && changes["datemodel"].currentValue) {
this.localdate = moment(changes["datemodel"].currentValue).toDate(); // raw Input value
}
} catch (ex) {
console.log('myDatePicker: ' + ex);
}
}
}
跨此页面的任何人的另一种解决方案。
我有一个类似的问题,这也不是EventEmitter的错。 :-)最初看来,我的EventEmitter间歇性地没有触发,但是罪魁祸首是负责触发EventEmitter的单击处理程序。
我在我的html模板中有这个:
<button mat-mini-fab color="primary">
<i class="fas fa-pencil-alt" (click)="onClickEdit()"></i>
</button>
和点击处理程序:
export class MyClass {
@Output() edit = new EventEmitter();
constructor() { }
onClickEdit() {
console.log('onClickEdit(), this.edit=' + this.edit);
this.edit.emit();
}
}
我添加了console.log()来调试问题,并且我发现每次单击精美的编辑图标时均不会触发onClickEdit(),这说明了为什么EventEmitter没有触发。 :-)
我通过将(click)属性移动到封闭按钮来解决此问题(事后看来,这似乎很明显。)
<button mat-mini-fab color="primary" (click)="onClickEdit()">
<i class="fas fa-pencil-alt"></i>
</button>
问题解决了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.