文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >烤面包机造型不适用

问烤面包机造型不适用
EN

Stack Overflow用户
提问于 2018-02-28 00:14:59
回答 4查看 9.8K关注 0票数 1

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

主要的问题是，当我试图弹出祝酒词时，吐司文本会显示在我想要的淡入/退出动画中，但是没有我希望看到的造型。

我在component.html中有一个component.html，我在module.ts中导入ToasterModule和list ToasterService作为提供程序，并且在index.html中导入了toaster.css。这些都是我在其他类似文章中看到的潜在解决方案，虽然它们确实在我祝酒时出现了文本，但它们并没有改变当前的任何一个问题。

请告诉我，如果您在下面的angular2-toaster实现中看到了一个错误，我以前从未使用过它，所以很可能有什么东西就在我的眼皮底下，我只是没有看到它。我还将此代码与工作中正在执行的其他项目进行了比较，代码与我阅读过的代码匹配，但其他项目正确地显示了吐司样式。

我的代码如下：

rollPlan.module.ts:

代码语言：javascript
复制
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:

代码语言：javascript
复制
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:

代码语言：javascript
复制
<button (click)="popToast('info', 'Title', 'Body')">Pop Toast</button>
<toaster-container [toasterconfig]="toasterconfig"></toaster-container>

index.html:

代码语言：javascript
复制
<!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:

代码语言：javascript
复制
{
  "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"
  }
}
angular
angular2-toaster
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-02-28 01:21:35

你的问题有一些潜在的问题(和解决方案)。

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

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

代码语言：javascript
复制
@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文件。

因此，您有两个选择：

票数 1
EN

Stack Overflow用户

发布于 2019-07-15 04:01:01

当我将版本更新为"angular2-toaster": "^8.0.0"时，烤面包机的背景样式没有作用。

就像这样：

​

我使用Angular 7和bootstrap

一开始，我在toaster.min.css之前导入了bootstrap.min.css，所以背景色不起作用。

通过在toaster.min.css中导入bootstrap.min.css后的angular.json解决如下：

代码语言：javascript
复制
    "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/angular2-toaster/toaster.min.css"
    ]
票数 0
EN

Stack Overflow用户

发布于 2020-03-31 07:39:25

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

代码语言：javascript
复制
"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.css"
            ],
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49020040

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档