【发布时间】：2018-08-07 18:30:12
【问题描述】：
在初始加载时，我收到错误No Toaster Containers have been initialized to receive toasts.，这是一个问题，但不是这个问题的主题（除非修复它碰巧解决了其他问题，我有一个偷偷摸摸的怀疑它会）。
当我尝试弹出 toast 时出现主要问题，并且 toast 文本与我想要的淡入/淡出动画一起显示，但 the styling I expect to see 没有一个@
我在component.html 中有一个toaster-container，我导入ToasterModule 并将ToasterService 列为module.ts 中的提供者，我在index.html 中导入了toaster.css。这些是我在其他类似文章中看到的潜在解决方案，虽然它们确实在我弹出吐司时显示了文本，但它们并没有改变这些当前问题。
如果您在下面的 angular2-toaster 实现中看到错误，请告诉我，我以前从未使用过它，所以很可能有什么东西就在我的眼皮底下，而我只是看不到它。我还将这段代码与工作中正在完成的其他项目进行了比较，代码与我阅读的地方相匹配，但其他项目正确显示了 toast 样式。
我的代码如下：
rollPlan.module.ts：
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Http, HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';
import {RollPlanComponent} from './rollPlan.component';
import {ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HTTPRollPlanService} from './http/http.service';
@NgModule({
imports: [
BrowserModule,
HttpModule,
ToasterModule,
FormsModule,
AgGridModule.withComponents([]),
BrowserAnimationsModule //For the fade in/out animation
],
declarations: [
RollPlanComponent
],
providers: [ToasterService],
bootstrap: [RollPlanComponent]
})
export class RollPlanModule {}
rollPlan.component.ts：
import {Component} from '@angular/core';
import {Injectable} from '@angular/core';
import {NgModule} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {ReturnStruct} from './http/return-struct';
import {ViewEncapsulation, OnInit, ViewChild} from '@angular/core';
import {HTTPRollPlanService} from './http/http.service';
import {HttpHandler} from '@angular/common/http';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import {GridOptions} from 'ag-grid';
import {FormsModule} from '@angular/forms';
import {RollingPlan} from './rollingplan';
import {ToasterService, ToasterConfig, Toast} from 'angular2-toaster';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@Component({
selector: 'app-root',
templateUrl: './rollPlan.component.html',
styleUrls: ['./rollPlan.component.css'],
providers: [HTTPRollPlanService, ToasterService]
})
export class RollPlanComponent implements OnInit {
// Below are for toaster alerts
toasterconfig: ToasterConfig = new ToasterConfig({
animation: 'fade',
positionClass: 'toast-top-right'
});
constructor(private httpService: HTTPRollPlanService,
private toasterService: ToasterService) {
}
popToast(typ: string, titl: string, bod: string) {
var toast: Toast = {
type: typ,
title: titl,
body: bod
};
this.toasterService.pop(toast);
}
/* There is more code here to implement ag-grid normally, but for this error
I chose to exclude it to provide the minimal/complete/verifiable example */
}
rollPlan.component.html：
<button (click)="popToast('info', 'Title', 'Body')">Pop Toast</button>
<toaster-container [toasterconfig]="toasterconfig"></toaster-container>
index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RollingPlan</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" src="../node_modules/angular2-toaster/toaster.css"/>
</head>
<body>
<app-root></app-root>
</body>
</html>
最后
package.json：
{
"name": "rolling-plan",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"ag-grid": "^16.0.1",
"ag-grid-angular": "^16.0.0",
"angular2-toaster": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "1.6.5",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"angular-ide": "^0.9.39",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
【问题讨论】：