angular - 在服务中使用 ng2-toastr

Question

场景:我需要使用ng2-toaster 来显示所有组件中的消息。而不是在每个组件中编写相同的 toastr 。我需要在全局服务中编写一次组件，所有组件都使用它。但我无法让它发挥作用。任何意见将是有益的。谢谢。

这是我的代码:

global.service.ts

import { ToastsManager } from 'ng2-toastr/ng2-toastr';
'''
constructor(public toastr: ToastsManager) { }
...
showSuccess() {
  this.toastr.success('Called from Global service', 'Success!', {toastLife: 3000});
}

some.component.ts

import { GlobalService } from './services';
...
ngInit(){
   this.globalService.showSuccess()
}

错误:

这是我遇到的错误。

Error: Application root component cannot be found. Try accessing application reference in the later life cycle of angular app.

Answer 1

对于 Angular v2.2.x，您需要在应用的 Root 组件中添加以下内容:

//AppComponent.ts(应用的根组件)

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