如何在 Angular 2 中的函数内部发出一个传递发射器的事件
How can I emit an event passing the emitter inside a function in Angular 2
父组件(模板):
<CHILD></CHILD>
<overlayer *ngIf="showPopup" (evTogglePopup)="onShowPopup($event)"></overlayer>
组件子项 (@Component):
@Output() evTogglePopup = new EventEmitter();
...
this.inputUt.ajaxCheckExistingEmail(email, this.evTogglePopup);
MyInputUtility 的一个函数(导入并用于 CHILD 的提供者@Injectable):
ajaxCheckExistingEmail(email, evEmitter:EventEmitter<any>){
if (email.valid){
return this.http.post(
GLOBAL_CONST.apiPath + "/user/user/api-check-user-email",
'email=' + email.value,
{headers: this.headers}
).map(response => response.json())
.subscribe(val => {
console.log(val);
if( val.emailExists ){
evEmitter.emit(true);
}
});
}
}
这 "solution" 不起作用,我想知道是否是因为 evEmitter 通过复制传递给 ajaxCheckExistingEmail 函数。
自己养
问题是 "overlayer" 是 CHILD(选择器)指向的一种不同的选择器形式,我认为它也可以工作。
我像下面这样改了,现在可以用了:
<CHILD (evTogglePopup)="onShowPopup($event)"></CHILD>
<overlayer *ngIf="showPopup"></overlayer>
来自 @Output()
的事件不会冒泡。您可以将它从一个父级传递给下一个父级,也可以使用共享服务在不存在直接父子关系的元素之间共享数据。
详情见https://angular.io/docs/ts/latest/cookbook/component-communication.html。
父组件(模板):
<CHILD></CHILD>
<overlayer *ngIf="showPopup" (evTogglePopup)="onShowPopup($event)"></overlayer>
组件子项 (@Component):
@Output() evTogglePopup = new EventEmitter();
...
this.inputUt.ajaxCheckExistingEmail(email, this.evTogglePopup);
MyInputUtility 的一个函数(导入并用于 CHILD 的提供者@Injectable):
ajaxCheckExistingEmail(email, evEmitter:EventEmitter<any>){
if (email.valid){
return this.http.post(
GLOBAL_CONST.apiPath + "/user/user/api-check-user-email",
'email=' + email.value,
{headers: this.headers}
).map(response => response.json())
.subscribe(val => {
console.log(val);
if( val.emailExists ){
evEmitter.emit(true);
}
});
}
}
这 "solution" 不起作用,我想知道是否是因为 evEmitter 通过复制传递给 ajaxCheckExistingEmail 函数。
自己养
问题是 "overlayer" 是 CHILD(选择器)指向的一种不同的选择器形式,我认为它也可以工作。
我像下面这样改了,现在可以用了:
<CHILD (evTogglePopup)="onShowPopup($event)"></CHILD>
<overlayer *ngIf="showPopup"></overlayer>
来自 @Output()
的事件不会冒泡。您可以将它从一个父级传递给下一个父级,也可以使用共享服务在不存在直接父子关系的元素之间共享数据。
详情见https://angular.io/docs/ts/latest/cookbook/component-communication.html。