Angular 订阅EventEmitter但获取现有项

我正在尝试构建一个通知组件。为此，我需要通过服务向

NotificationComponent

发送通知。我的方法是使用EventEmitter向组件发送通知，但我希望

NotificationComponent

在第一次通过订阅通知的Observable路由到组件时获取现有通知，但它不起作用。查看我的代码，请指出问题或建议替代方法

目前，它只显示来自通知编号2的通知（这意味着第一个通知不会到达

通知组件

，而是2，以此类推）

以下是通知服务代码

从'@angular/core'导入{Injectable}；
从“./Notification”导入{Notification}；
从'rxjs'导入{from}；
从'@angular/Router'导入{Router}；
从'@angular/core'导入{EventEmitter}；
@注射的({
providedIn:'根'
})
出口类通知服务{
私有通知=[]；
addEvent=新的EventEmitter（）；
removeEvent=neweventemitter（）；
构造函数（专用路由器：路由器）{
}
添加（标题：字符串，消息：字符串，过期秒数：空）{
const noti=新通知（）；
noti.title=标题；
noti.message=消息；
this.notifications.push（）；
this.addEvent.emit（noti）；
this.router.navigate（[{outlets:{notification:'notification'}]）；
如果（过期秒>0）{
设置超时（（）=>{
此.removeById（noti.id）；
}，过期秒*1000）；
}
}
/*获取通知*/
getNotifications（）{
从（本通知）返回；
}
/*删除通知*/
removeById（notificationId）{
const index=this.notifications.findIndex（n=>{
返回notificationId==n.id；
});
这个.通知.拼接（索引，1）；
this.removeEvent.emit（notificationId）；
}
}

以下是通知组件类的代码

从'@angular/core'导入{Component，OnInit}；
从“../notification.service”导入{NotificationService}；
从“../Notification”导入{Notification}；
从“@fortawesome/free solid svg icons”导入{faWindowClose}；
从'@angular/Router'导入{Router}；
@组成部分({
选择器：“应用程序通知”，
templateUrl:'./notifications.component.html'，
样式URL:['./notifications.component.scss']
})
导出类通知组件实现OnInit{
通知：通知[]=[]；
faWindowClose=faWindowClose；
构造函数（专用ns:NotificationService，
专用路由器（路由器）{
}
恩戈尼尼特（）{
this.ns.getNotifications（）
.订阅（通知=>{
this.notifications=通知；
});
这是我的补充
.订阅（（通知=>{
this.notifications.push（通知）；
}));
这是我们的removeEvent
.订阅（（通知=>{
const index=this.notifications.findIndex（n=>{
返回n.id==notification.id；
});
这个.通知.拼接（索引，1）；
}));
}
重新通知（id）{
此.ns.removeById（id）；
if（this.notifications.length
{{n.title}}
{{n.message}}

将addEvent转换为ReplaySubject。您的组件在发出第一个通知后呈现，并且仅在第一个事件消失后订阅事件。使用ReplaySubject，您的组件应获得第一个事件

addEvent = new ReplaySubject(1);

而且似乎有一个小错误

this.notifications.push();

---

没有通知被推送到数组，并且在调用

removeById

将addEvent转换为ReplaySubject时会导致错误。您的组件在发出第一个通知后进行渲染，并且仅在第一个事件消失后订阅事件。使用ReplaySubject，您的组件应该获得第一个事件

addEvent = new ReplaySubject(1);

而且似乎有一个小错误

this.notifications.push();

---

不会将任何通知推送到阵列，并且在调用removeById时会导致错误。能否显示您的.htmld？除了组件输出外，不要将EventEmitter用于任何其他输出。请使用主题或其变体之一（BehaviorSubject、ReplaySubject）.@ChanakaWeerasinghe HTML已添加，请查看我是否认为

Notifications组件

是由Angular router渲染的？@Andrei Yeah NotificationComponent位于次要出口，每当添加新通知时，我都会导航到它。能否显示你的.htmlDon除了组件输出外，不要将EventEmitter用于任何其他内容。请使用主题或它的变体（Behavior Subject，ReplaySubject）中的e。添加了HTML，请检查

NotificationsComponent

是由Angular router呈现的吗？@Andrei Yeah NotificationComponent位于辅助出口，每当添加新通知时，我都会导航到它。