Angular 为什么单击后角度组件刚刚更新？

我是新来的，所以我不会惊讶于我错过了基本的东西。我尝试了Angular文档和谷歌搜索，但到目前为止还不知道为什么我的组件只是在点击后更新UI

我的场景是，我希望有一个名为NotificationComponent的共享组件和一个名为NotificationService的共享服务。因为我可能会发生不止一个错误，我的NotificationComponent应该显示所有这些消息。除此之外，我还有一个http错误拦截器和一个自定义错误处理

发生的情况是，我得到了3个https错误，拦截器得到了全部3个，自定义错误处理得到全部3个，通知服务创建了全部3个错误，但通知组件只自动呈现了1个（有时2个）错误。单击UI中的任意位置后，会显示提醒MSG。为什么会这样

层次结构：

AppModule

导入

SharedModule

[包含通知服务和组件]。通知组件选择器位于

app.component.html

组成部分：

@组件({
选择器：“应用程序通知”，
templateUrl:'./notification.component.html'，
样式URL:['./notification.component.scss']
})
导出类NotificationComponent实现OnInit、OnDestroy{
消息：消息[]=[]；
通知订阅：订阅；
构造函数（私有notificationService:notificationService）{}
恩戈尼尼特（）{
this.notificationSubscription=this.notificationService.onNotify（）
.subscribe（msg=>{
this.messages.push（msg）；
});
}
恩贡德斯特罗（）{
//取消订阅以避免内存泄漏
此.notificationSubscription.unsubscribe（）；
}
}

HTML:

{{msg.detail}

服务：

@可注入({
providedIn:'根'
})
出口类通知服务{
消息：消息[]；
私有主体=新主体（）；
构造函数（）{
this.messages=[]；
}
onNotify（）：可观察{
返回此.subject.asObservable（）；
}
错误（标题：字符串，详细信息：字符串）：无效{
this.notify（{type:'error'，title:title，detail:detail}）；
}
通知（消息：消息）{
this.subject.next（消息）；
}
}

自定义错误处理程序：

@Injectable（）
导出类CustomErrorHandler实现ErrorHandler{
构造函数（@Inject（NotificationService）
私人通知服务：通知服务）{
}
handleError（错误：任意）：无效{
this.notificationService.error（error.title、error.detail）；
}
}

---

PS:我不受任何特定实现的限制，因此如果需要，我可以更改方法。

在您的

NotificationComponent

类中，在

constructor

中插入

ChangeDetectorRef

，并显式更新

消息

数组，以便angular可以推断属性已更改，从而更新UI

构造函数(
专用只读changeDetector:ChangeDetectorRef，
私有只读notificationService:notificationService
) {}
public ngOnInit（）：void{
this.notificationSubscription=this.notificationService
.onNotify（）
.订阅({
下一步：（msg）=>{
//不要改变现有数组，Angular无法推断是否应该更新UI
this.messages=[…this.messages，msg]；
//如果上述方法不起作用，则显式更新UI
this.changeDetector.detectChanges（）；
}
});
}

我更新了代码。我相信我的组件没有任何装饰。该组件是SharedModule的一部分，SharedModule在AppModule上导入。选择器放在您的服务中的app.component.htmlTry import

ngZone

中，并修改

notify（message:message）{this.ngZone.run（（）=>{this.subject.next（message）；}}

。您好，我认为您遇到了与此相同的问题。根本原因是错误发生时更改检测不起作用，这家伙和我有同样的问题。由于公认的答案已经很老了，我相信@prahbh的方法使用了更好的类来注入，因此我将保留我的问题，因为有一个更新的解决方案。我必须使用

detectChanges（）

方法，它是有效的！谢谢