Angular 2: Loading a nested component destroys an existing ng2-toastr scope

Question

I use ng2-toastr on my page and work fine, but when I have a nested component on the page, the existing ng2-toastr (ToastManager) area is destroyed, and toastr does not work.

constructor(public toastr: ToastsManager,public vcr: ViewContainerRef) { this.toastr.setRootViewContainerRef(vcr); } 

In my method, when I call

 this.toastr.warning('Its Warning','Alert'); 

Works fine, but in my html when I load another component ie

 <es-app></es-app> 

toastr on my page does not work (no errors)

Sometimes I get:

Attempted to use a corrupted view: detectChanges Error: Attempted to use a corrupted view: detectChanges at ViewDestroyedError

Answer 1

Initializing container inside ngAfterViewInit resolved issue

 this.toastr.setRootViewContainerRef(vcr); 

instead of the place of the counter-constructor in

 ngAfterViewInit(){ this.toastr.setRootViewContainerRef(this.vcr); } 

Since nested components load and destroy the page instance, therefore we must load after loading all the components and that this happens in ngAfterViewInit according to the hook of the page life cycle