标签: angular2-toaster

我在角度应用中使用angular2-toaster

这很简单,

您在组件的模板中定义烤箱容器

<toaster-container></toaster-container>

并且您使用类型的toasterService ToasterService来弹出烤面包机

  this.toasterService.pop('success', 'Args Title', 'Args Body');

但是这种方法存在问题,我不想在我想要弹出烤面包机的每个组件中定义一个容器,我想在root组件中定义一次.应用程序引导程序,但当我这样做,我得到错误

 No Toaster Containers have been initialized to receive toasts.

任何解决方案

我的要求是在应用程序组件加载之前通过调用两个Rest Api加载一些数据。如果API出现任何错误，则会在Toaster（angular2-toaster）中显示消息。

在加载应用程序组件之前，将执行以下AppLoadService

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';
import { APP_SETTINGS } from 'app/app-settings/settings';

@Injectable()
export class AppLoadService {

constructor(private httpClient: HttpClient) { }

loadLabs(): Promise<any> {
    return new Promise((resolve, reject) => {
        this.httpClient.get(`/api/v1/api/lab`)
            .toPromise()
            .then((res: any) => {
                APP_SETTINGS.labs = res;
                resolve();
            })
            .catch((err: any) => {
                reject(err);
            });
    });
}
/////////////////******************////////////////////////////
getSettings(): Promise<any> {
    return new Promise((resolve, reject) => {
        this.httpClient.get(`assets/settings/config.json`)
            .toPromise()
            .then((config: any) => {
                APP_SETTINGS.loginURL = config["login"]; …

我已经安装了 ngx-toastr 并导入了 app.module.ts，但在编译时出现此错误， 在此处输入图像描述...是否是因为我在我创建的服务文件中设置了烤面包机的属性，如下所示？在此输入图像描述

我尝试添加 @import '~ngx-toastr/toastr.css'; 在 styles.css 中仍然没有效果。有谁知道此错误的原因可能是什么以及如何修复它

我在angular2应用程序中使用angular2烤面包机.在应用程序启动时,我得到以下错误.

我的app_module如下:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { ToasterModule, ToasterService} from 'angular2-toaster';
import { AppComponent }   from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule,
        HttpModule,   
        ToasterModule
    ],
    declarations: [AppComponent, HomeComponent, 
        CategoryListComponent, ConsultSotiComponent,
        HeaderComponent, FooterComponent],
    providers: [CategoryListService, LeadService, 
        LookUpDetailsService, CompanyService, ConsultSotiService, ToasterService],
    bootstrap: [AppComponent]
})

export class AppModule { …