Question

在初始加载时，我得到错误No Toaster Containers have been initialized to receive toasts.这是一个问题，但不是这个问题的主题（除非修复它恰好解决了其他问题，我有一个潜行的怀疑它会）。

主要问题出现在我尝试弹出烤面包并且吐司文本与我想要的淡入/淡出动画一起显示，但没有the styling I expect to see

我在toaster-container中有component.html，我导入ToasterModule并在ToasterService中列出module.ts作为提供商，我有toaster.css导入index.html。这些是我在其他类似文章中看到的潜在解决方案，虽然他们在我举杯时确实出现了文字，但他们并未改变这些当前问题。

如果您在下面的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"
  }
}

Answer 1

您的问题存在一些潜在的问题（和解决方案）。

首先，有一个新的5.0.0版本的angular2-toaster可以通过提供No Toaster Containers have been initialized to receive toasts实现来最终解决您的ToasterModule.forRoot()错误。

要使用此版本，只需升级到5.0.0并将angular2-toaster包含更改为：

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    ToasterModule.forRoot(),
    FormsModule,
    AgGridModule.withComponents([]),
    BrowserAnimationsModule //For the fade in/out animation
  ],
  declarations: [
    RollPlanComponent
  ],
  providers: [], // note you no longer need to include ToasterService
  bootstrap: [RollPlanComponent]
})

这将确保单人烤面包机服务与您的烤面包机容器一起使用。如果您无法升级库的版本，则应省略根提供程序中的ToasterService包含，并仅将其包含在组件的提供程序中。

对于您的问题，缺乏样式，您通常无法直接在html入口点引导node_modules css文件。

因此，您有两种选择：

从CDN加载文件：https://npmcdn.com/angular2-toaster@5.0.0/toaster.min.css
通过您使用的任何css预处理器将文件加载到style.css或其他根css / scss文件中。
@import 'node_modules/angular2-toaster/toaster'

Answer 2

将版本更新为"angular2-toaster": "^8.0.0"时，烤面包机背景样式无效。

像这样：

我使用Angular 7和bootstrap

起初我在toaster.min.css之前导入了bootstrap.min.css，所以背景色不起作用
通过在toaster.min.css中bootstrap.min.css之后导入angular.json来解决，例如：

    "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/angular2-toaster/toaster.min.css"
    ]

Answer 3

将其添加到angular.json后，请记住重新启动Web进程，如果使用Visual Studio，则需要将其关闭，否则只需重新运行 ng服务

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.css"
            ],

Answer 4

您可以像这样在style.css中加载文件

@import "~angular2-toaster/toaster.min.css";

没有应用烤面包造型

4 个答案: