Verwenden Sie ng2-toastr in einem Dienst

Question

Szenario: Ich brauche ng2-toaster, um Nachrichten in allen Komponenten anzuzeigen. Anstatt den gleichen Toaster in jede Komponente zu schreiben. Ich muss eine Komponente in einem globalen Dienst einmal schreiben und alle Komponenten verwenden es. Aber ich konnte es nicht funktionieren lassen. Jeder Rat wäre hilfreich. Vielen Dank.

Hier ist mein Code:

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() 
} 

Fehler:

Dies ist der Fehler, den ich bekomme.

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

Answer 1

Für Angular V2.2.x Sie unten in Ihrem Root-Komponente Ihrer Anwendung hinzufügen müssen:

// AppComponent.ts (Root Bestandteil Ihrer App)

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