Тостер не применяется

Lucas Burns спросил: 03 февраля 2018 в 10:34 в: angular

При начальной загрузке я получаю ошибку No Toaster Containers have been initialized to receive toasts., которая является проблемой, но не темой этого вопроса (если только не исправление этого не происходит, чтобы решить другие проблемы, которые у меня есть подозрительное подозрение) .

Основная проблема возникает, когда я пытаюсь поднять тост, а текст тоста отображается вместе с анимацией fade in / out, которую я хочу, но ни один из стилей, которые я ожидаю увидеть

У меня есть toaster-container в component.html, я импортирую ToasterModule и список ToasterService в качестве поставщика в module.ts, и У меня есть toaster.css, импортированный в index.html. Это потенциальные решения, которые я видел в других подобных статьях, и, хотя они и отображали текст, когда я выкладываю тост, они не изменяли ни одну из этих текущих проблем.

Пожалуйста, дайте мне знать, если вы видите ошибка в реализации angular2-toaster ниже, я никогда с ней не работал, так что очень возможно, что что-то прямо у меня под носом, и я просто не вижу этого. Я также сравнил этот код с другими проектами, выполняемыми на работе, и код соответствует тому, где я его читал, но другие проекты правильно отображают стиль тоста.

Мой код выглядит следующим образом: 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"
  }
}

0 ответов