Es wurden keine Toaster Container initialisiert um Toasts zu empfangen

Question

Ich arbeite mit angular2 Toaster in angular2 Anwendung. Beim Programmstart bekomme ich einen Fehler.

meine app_module ist unten:

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { RouterModule } from '@angular/router'; 
import { HttpModule } from '@angular/http'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { ToasterModule, ToasterService} from 'angular2-toaster'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     AppRoutingModule, 
     HttpModule, 
     ToasterModule 
    ], 
    declarations: [AppComponent, HomeComponent, 
     CategoryListComponent, ConsultSotiComponent, 
     HeaderComponent, FooterComponent], 
    providers: [CategoryListService, LeadService, 
     LookUpDetailsService, CompanyService, ConsultSotiService, ToasterService], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { } 

und ich habe auch Bootstrap dieses Modul.

Mein app.component ist unten:

import { Component } from '@angular/core'; 
import { OnInit } from '@angular/core'; 
import { TranslateService } from './translate/translate.service'; 
import { ToasterService} from 'angular2-toaster'; 
@Component({ 
    selector: 'mp-app',  
    providers: [ToasterService], 
    template: `<div> 
      <toaster-container [toasterconfig]="config1"></toaster-container> 
      <button (click)="popToast()">pop toast</button><br/> 
     </div>` 

}) 

export class AppComponent implements OnInit { 
    title = 'Enterprise MarketPlace'; 
    public translatedText: string; 
    public supportedLanguages: any[]; 

    constructor(private _translate: TranslateService, private toasterService: ToasterService) { 
     this.popToast(); 
    } 

    popToast() { 
     this.toasterService.pop('success', 'Args Title', 'Args Body'); 
    } 

Dieses in einem No Toaster Containers have been initialized to receive toasts Fehler führt.

Answer 1

ich den gleichen Fehler hatte und ich gelöst es wie folgt: Zunächst einmal die Komponente in einem separaten TS erstellen:

import {NgModule, Component} from '@angular/core'; 
import {ToasterModule, ToasterService} from 'angular2-toaster'; 
//import {Root} from './root.component' 

@NgModule({ 
    imports: [ToasterModule], 
    declarations: [toastComponent], 
    providers: [], 
    bootstrap: [toastComponent] 
}) 

@Component({ 
    selector: 'root', 
    template: ` 
      <toaster-container></toaster-container> 
      <button (click)="popToast()">pop toast</button>` 
}) 

export class toastComponent { 
    private toasterService: ToasterService; 

    constructor(toasterService: ToasterService) { 
     this.toasterService = toasterService; 
    } 

    popToast() { 
     this.toasterService.pop('success', 'Args Title', 'Args Body'); 
    } 
} 

danach, Import in Ihrer .module, im Deklarationsteil der toastComponent, das ist alles, Sie können in Ihrem HTML das Tag merken, dies ist der Selektor toastromponent .... Sie haben einen Fehler, weil Sie die toastr-Komponente nicht initialisieren, so folgen Sie meinen Schritten und wird

Answer 2

ich konfrontiert ähnliches Problem Ich habe gerade keinen Toaster in der Vorlage hinzugefügt. Überprüfen Sie, ob Sie die Toasterkomponente ordnungsgemäß in die Vorlage eingefügt haben.

<toaster-container [toasterconfig]="toasterconfig"></toaster-container>