Angular 尚未初始化任何烤面包机容器以接收烤面包机

我正在angular2应用程序中使用angular2烤面包机。在应用程序启动时，我发现以下错误

我的应用程序模块如下：

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

从'@angular/core'导入{Component}；
从“@angular/core”导入{OnInit}；
从“./translate/translate.service”导入{TranslateService}；
从“angular2 toaster”导入{ToasterService}；
@组成部分({
选择器：“mp应用程序”，
提供者：[烤面包机服务]，
模板：`
爆米花吐司

`
})
导出类AppComponent实现OnInit{
标题=‘企业市场’；
公共翻译文本：字符串；
公共支持语言：任何[]；
构造函数（私有_translate:TranslateService，私有toasterService:toasterService）{
这个.poptoos（）；
}
爆米花{
this.toasterService.pop（'success'，'Args Title'，'Args Body'）；
}

这导致

没有烤面包机容器被初始化以接收烤面包机

错误。

我遇到了同样的错误，我这样解决了它：首先在单独的TS中创建组件：

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

从'@angular/core'导入{NgModule，Component}；
从“angular2 toaster”导入{ToasterModule，ToasterService}；
//从“./Root.component”导入{Root}
@NGD模块({
导入：[烤面包机模块]，
声明：[toastComponent]，
提供者：[]，
引导：[toastComponent]
})
@组成部分({
选择器：'根'，
模板：`
爆米花吐司`
})
导出类toastComponent{
私人烤面包机服务：烤面包机服务；
构造器（toasterService:toasterService）{
this.toasterService=toasterService；
}
爆米花{
this.toasterService.pop（'success'，'Args Title'，'Args Body'）；
}
}

---

在那之后，在你的.module中，在声明部分导入toastComponent，仅此而已，你可以在你的HTML中放入标记记住这是toastComponent的选择器…你有一个错误，因为你没有初始化toastComponent，所以按照我的步骤操作，将会工作

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

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

更新5.0.0

---

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

使用此组件而不是不必要的模块这将不起作用，并引发编译错误，因为变量ToasterService的多个声明现在有一个5.0.0版本，允许在根目录之外包含toaster容器，以及多个容器，同时保证ToasterService的单例