トースターコンテナはトーストを受け取るように初期化されていません

Question

私は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_moduleは以下の通りです。

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

これは​​3210エラーが発生します。

Answer 1

私は同じエラーを持っていたし、私はこのようにそれを解決：まず第一には、別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'); 
    } 
} 

、あなたの.moduleで輸入、宣言部でtoastComponent、thatsすべてあなたはあなたのHTMLにタグを入れることができますこれはセレクタtoastrcomponentであることを覚えておいてください...あなたはtoastrコンポーネントを初期化していないのでエラーがありますので私のステップに従ってください。

Answer 2

私は直面しています同様の問題。私はちょうどテンプレートのトースターコンテナを追加していない。 テンプレートにトースターコンポーネントが正しく追加されているかどうかを確認してください。

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