Angular2 EventEmitter 我做错了什么?
What I am doing wrong with Angular2 EventEmitter?
我想用 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));
}
}
当然我已经在主 bootstrap 文件中设置了服务。
也许你有一些解决问题的建议吗?
EventEmitter
不应在服务中使用。请改用 Observable
或 Subject
。 @Output()
在服务中是没有意义的。 @Output()
仅在指令和组件中受支持。
无论如何,您的代码应该可以达到您的预期。
我认为当前的问题是您在多个地方提供 ExceptionsManagerConfig
,这导致一个组件在 ExceptionManagerConfig
的不同实例上调用 ExceptionManagerConfig.setAlert()
,然后将另一个注入 ToastComponent
。
您应该在 NgModule
处提供 ExceptionManagerConfig
(如果您使用 >= RC.5)或 AppComponent
以在所有地方注入相同的实例。
我想用 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));
}
}
当然我已经在主 bootstrap 文件中设置了服务。
也许你有一些解决问题的建议吗?
EventEmitter
不应在服务中使用。请改用 Observable
或 Subject
。 @Output()
在服务中是没有意义的。 @Output()
仅在指令和组件中受支持。
无论如何,您的代码应该可以达到您的预期。
我认为当前的问题是您在多个地方提供 ExceptionsManagerConfig
,这导致一个组件在 ExceptionManagerConfig
的不同实例上调用 ExceptionManagerConfig.setAlert()
,然后将另一个注入 ToastComponent
。
您应该在 NgModule
处提供 ExceptionManagerConfig
(如果您使用 >= RC.5)或 AppComponent
以在所有地方注入相同的实例。