angular - 没有 Toaster 容器被初始化来接收 toast

Question

我正在 angular2 应用程序中使用 angular2 toastr 。在应用程序启动时，我遇到了错误。

我的 app_module 如下:

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 { }

我也有引导这个模块。

我的 app.component 如下:

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');
    }

这会导致 没有 Toaster 容器被初始化来接收 toast
错误。

Answer 1

我遇到了类似的问题。我只是没有在模板中添加 toastr 容器。检查您是否在模板中正确添加了 toastr 组件。

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

更新 Angular5-Toaster 5.0.0

现在有一个 5.0.0 版本，它允许在根之外包含 toastr 容器，以及多个容器，同时保证 ToasterService 的单例。这纠正了行为