我在 Angular2 EventEmitter 上做错了什么？答案

【问题标题】：What I am doing wrong with Angular2 EventEmitter?我在 Angular2 EventEmitter 上做错了什么？
【发布时间】：2016-12-28 08:05:40
【问题描述】：

我想用 angular2 EventEmitter 创建通用 toast 服务。我创建了一个服务并发出了一些数据。我想在组件中捕获这些数据，但它不起作用：/

这是必须发出事件的服务：

 import {EventEmitter, Injectable, Output} from "@angular/core";
 import {IAlert} from "../../types/interfaces/IAlerts";

@Injectable()
export class ExceptionsManagerConfig {
public getalert(): IAlert {
    return this._alert;
}

public setAlert(value: IAlert) {
    this._alert = value;
    this.alertChangeEvent.emit(value);
    console.log("set alert");
}

@Output() alertChangeEvent: EventEmitter<any> = new EventEmitter();
private _alert: IAlert;
}

这是一个必须捕获事件的组件：

import {Component, OnDestroy, OnInit, Input, EventEmitter} from "@angular/core";
import {ExceptionsManagerConfig} from "../../../../sheard/settings/exeptions/exeptions.menager.service.config";
import {IAlert} from "../../../../sheard/types/interfaces/IAlerts";
declare const Materialize: any;

@Component({
    providers: [ExceptionsManagerConfig],
    selector: "toast-alert",
    templateUrl: "app/elements/components/construction/toast-alert/toast-alert.html",
})
export class ToastComponent implements OnInit, OnDestroy {
    ngOnInit(): void {
        this.exceptionsManagerConfig.alertChangeEvent.subscribe(alert => this.showToast(alert));
        console.log("toast");
    }

    ngOnDestroy(): void {
    }

    showToast = (alert: IAlert) => {
        console.log(alert.message);
    };

    constructor(private exceptionsManagerConfig: ExceptionsManagerConfig) {

        this.exceptionsManagerConfig.alertChangeEvent.subscribe(alert => this.showToast(alert));
    }
}

当然，我已经在主引导文件中设置了服务。

也许你有一些技巧可以帮助我解决我的问题？

【问题讨论】：

标签： angular typescript eventemitter

【解决方案1】：

EventEmitter 不应该在服务中使用。请改用Observable 或Subject。服务中的@Output() 毫无意义。 @Output() 仅在指令和组件中受支持。

无论如何，您的代码都应该符合您的预期。我假设当前的问题是您在多个位置提供ExceptionsManagerConfig，这导致一个组件在ExceptionManagerConfig 的不同实例上调用ExceptionManagerConfig.setAlert()，然后将一个注入到ToastComponent 的组件。

您应该在NgModule（如果您使用>= RC.5）或AppComponent 处提供ExceptionManagerConfig，以便在各处注入相同的实例。

【讨论】：