Question

组件PARENT（模板）：

<CHILD></CHILD>
<overlayer *ngIf="showPopup" (evTogglePopup)="onShowPopup($event)"></overlayer>

组件CHILD（@Component）：

@Output() evTogglePopup = new EventEmitter();
...
this.inputUt.ajaxCheckExistingEmail(email, this.evTogglePopup);

MyInputUtility的一个功能（一个提供者@Injectable导入并用于CHILD）：

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);
                }
            });
        }
}

这个“解决方案”不起作用，我想知道是不是因为evEmitter是通过副本传递给ajaxCheckExistingEmail函数的。

由我自己制作
问题是“覆盖层”是CHILD（选择器）指向的一个不同的选择器形式，我认为它也会起作用。

我在下面进行了如下更改，现在可行了：

<CHILD (evTogglePopup)="onShowPopup($event)"></CHILD>
    <overlayer *ngIf="showPopup"></overlayer>

Answer 1

来自@Output()的事件不会冒泡。您可以将它从一个父项传递到下一个父项，也可以使用共享服务在不是直接父子关系的元素之间共享数据。

有关详细信息，请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html。

如何在Angular 2中的函数内发出传递发射器的事件

1 个答案: