Angular 2:加载嵌套组件正在破坏ng2-toastr的现有范围 [英] Angular 2 : Loading nested Component is destroying the existing scope of ng2-toastr

问题描述

我在页面中使用ng2-toastr并正常工作，但是当页面中有嵌套组件时，现有的ng2-toastr(ToastManager)范围被破坏，toastr无法正常工作.

I'm using a ng2-toastr in my page and working fine, but when I have a nested component in the page the existing ng2-toastr(ToastManager) scope is destroyed and toastr is not working.

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

在我调用我的方法中

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

它工作正常，但是当我加载其他组件即在我的html中

Its Working fine, but in my html when I'm loading other component i.e

<es-app></es-app>

我页面中的烤面包机不工作(没有错误)

the toastr in my page is not working (No errors)

有时候我会得到:

尝试使用已损坏的视图:detectChanges错误:尝试使用已损坏的视图:在ViewDestroyedError上的detectChanges

Attempt to use a destroyed view: detectChanges Error: Attempt to use a destroyed view: detectChanges at ViewDestroyedError

推荐答案

通过初始化ngAfterViewInit内部的容器解决了该问题

By initializing the container inside ngAfterViewInit resolved the issue

this.toastr.setRootViewContainerRef(vcr);

代替

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

因为嵌套的组件正在加载和破坏页面实例，所以我们必须在所有组件加载完毕后进行加载，并且会按照页面生命周期钩子在ngAfterViewInit中发生

Because the nested components are loading and destroying the page instance, So we have to load after all components are loaded and that happens in ngAfterViewInit as per page lifecycle hook

这篇关于Angular 2:加载嵌套组件正在破坏ng2-toastr的现有范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！