I have a component to display notifications. It has a ViewChild that has a ViewContainerRef.
Based on the type of notification, I display different components in place of that viewChild. This is the code to create and add the component based on the notification type:
private loadInappNotificationItem(messageType: MessageType): void {
const inappNotificationItemComponent: Type<IInappNotificationItemComponent>
= this.inappNotificationItemMapping.get(messageType);
if (inappNotificationItemComponent === undefined) {
this.hasCustomComponent = false;
return;
}
const componentFactory: ComponentFactory<IInappNotificationItemComponent> =
this.componentFactoryResolver.resolveComponentFactory(inappNotificationItemComponent);
this.hasCustomComponent = true;
const viewContainerRef: ViewContainerRef = this.inappNotificationItemHost.viewContainerRef;
viewContainerRef.clear();
const componentRef: ComponentRef<IInappNotificationItemComponent> =
viewContainerRef.createComponent(componentFactory);
const component: IInappNotificationItemComponent = componentRef.instance;
component.notification = this.notification;
}
This works as intended, but now i'd like to show a fallback component, if anything goes bad when displaying the notification component (for example when the structure of the notification property is wrong).
For this i'd need to be able to register a function somewhere, that is called when displaying the viewChild failed for some reason, so that i can then remove it and display a fallback.
I know that i can register a custom ErrorHandler on the Module that contains the component, and i can catch the Errors i'd like to catch there, but in that handler i have no reference to the notification component whose viewChild failed to display.
from How do i catch errors that happen when showing a dynamic Angular 7 component
No comments:
Post a Comment