Angular 2:加载嵌套组件正在破坏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)

有时候我会得到:

推荐答案

通过初始化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的现有范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！