我对Angular还很生疏,因此可能会错过一些基本的东西。我已经查看了Angular文档和谷歌搜索,但仍然不清楚为什么我的组件仅在单击后更新UI?
我的场景是这样的:我想有一个名为NotificationComponent的共享组件和一个名为NotificationService的共享服务。由于可能会出现多个错误,我的NotificationComponent应该显示所有这些消息。除此之外,我还有一个http错误拦截器和自定义错误处理。
发生的情况是:我收到了3个https错误,拦截器捕获了全部3个错误,自定义错误处理也处理了全部3个错误,通知服务创建了全部3个错误,但通知组件只自动呈现1个(有时是2个)错误。当我单击UI上的任何位置时,剩余的消息就会显示出来。这是为什么呢?
层次结构:AppModule
导入SharedModule
[包含通知服务和组件]。通知组件选择器位于app.component.html
内部。
组件:
@Component({
selector: 'app-notification',
templateUrl: './notification.component.html',
styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit, OnDestroy {
messages: Message[] = [];
notificationSubscription: Subscription;
constructor(private notificationService: NotificationService) { }
ngOnInit() {
this.notificationSubscription = this.notificationService.onNotify()
.subscribe(msg => {
this.messages.push(msg);
});
}
ngOnDestroy() {
// unsubscribe to avoid memory leaks
this.notificationSubscription.unsubscribe();
}
}
HTML:
<div *ngFor = "let msg of messages" role="alert">
{{msg.detail}}
</div>
服务:
@Injectable({
providedIn: 'root'
})
export class NotificationService {
messages: Message[];
private subject = new Subject<Message>();
constructor() {
this.messages = [];
}
onNotify(): Observable<Message> {
return this.subject.asObservable();
}
error(title: string, detail: string): void {
this.notify({type: 'error', title: title, detail: detail});
}
notify(message: Message) {
this.subject.next(message);
}
}
自定义错误处理程序:
@Injectable()
export class CustomErrorHandler implements ErrorHandler {
constructor(@Inject(NotificationService)
private notificationService: NotificationService) {
}
handleError(error: any): void {
this.notificationService.error(error.title, error.detail);
}
}
注意:我并没有受限于任何具体的实现方案,所以必要时可以更改方法。
ngZone
并修改notify(message: Message) { this.ngZone.run(() => { this.subject.next(message); }); }
。 - N.F.