未应用烤面包机样式

Question

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

主要问题出现在我尝试弹出吐司时，吐司文本与我想要的淡入淡出 in/out 动画一起显示，但是 none of the styling I expect to see

我在 component.html 中有一个 toaster-container，我导入 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 可用，它将通过提供 ToasterModule.forRoot() 实现来最终解决您的 No Toaster Containers have been initialized to receive toasts 错误。

要使用此版本，只需升级到 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 入口点直接 bootstrap 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

一开始我在bootstrap.min.css之前导入了toaster.min.css，所以背景色没有效果
通过在 angular.json 中的 bootstrap.min.css 之后导入 toaster.min.css 来解决，例如：

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

Answer 3

您可以像

一样加载style.css中的文件

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

Answer 4

添加到angular.json后记得重启web进程，如果使用Visual Studio需要关闭，否则重新运行ng serve

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

未应用烤面包机样式

Toaster styling not being applied

angular

angular2-toaster