ng2-toastr路由跳转后无法显示通知问题求助

我之前也碰到过一模一样的问题，核心原因是ToastsManager初始化时绑定的ViewContainerRef是app-root组件的容器，但路由切换后，新页面的组件上下文和这个容器的关联出现了断层，导致toast没法正常渲染到当前视图里。下面给你几个亲测有效的解决方法：

方法一：指定全局专属的Toastr渲染容器 #

这个是最直接稳妥的方案，在app根组件里专门加一个全局容器，让所有toast都渲染到这里，不管路由怎么切换都不受影响：

1. 修改app.component.html，添加一个带模板引用变量的空容器：

<router-outlet></router-outlet>
<!-- 专门用于渲染toast的全局容器 -->
<div #toastContainer></div>

2. 修改app.component.ts，获取这个容器的ViewContainerRef并绑定给ToastsManager：

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 获取模板里的全局容器元素
  @ViewChild('toastContainer', { read: ViewContainerRef }) toastContainer: ViewContainerRef;

  constructor(private toastr: ToastsManager) {}

  ngAfterViewInit() {
    // 把toastr的渲染目标设置为这个全局容器
    this.toastr.setRootViewContainerRef(this.toastContainer);
  }
}

这样所有通知都会固定渲染在这个全局div里，路由跳转到任何页面都能正常显示。

方法二：监听路由事件动态更新容器 #

如果你的场景需要toast渲染在当前路由组件的上下文里，可以监听路由导航完成事件，每次切换后重新绑定容器：

import { Component, ViewContainerRef } from '@angular/core';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(
    private toastr: ToastsManager,
    private router: Router,
    private vcr: ViewContainerRef
  ) {
    // 只监听路由跳转完成的事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 每次路由切换后重新设置容器
      this.toastr.setRootViewContainerRef(this.vcr);
    });
  }
}

这个方法会在每次路由切换完成后，重新把toastr的容器绑定到app-root的上下文，确保后续通知能正常渲染。

方法三：确认ToastsManager是全局单例 #

有时候模块配置错误会导致ToastsManager被多次实例化，也会出现路由切换后失效的情况。检查你的根模块AppModule是否只导入一次ToastrModule：

import { ToastrModule } from 'ng2-toastr/ng2-toastr';

@NgModule({
  imports: [
    // 其他业务模块...
    ToastrModule.forRoot() // 仅在根模块中导入一次
  ]
})
export class AppModule { }

单例模式能保证整个应用只有一个ToastsManager实例，避免多实例导致的上下文混乱。

优先试试方法一，基本能解决绝大多数路由切换后toastr不显示的问题。

内容的提问来源于stack exchange，提问作者Raghav