为什么 toastr 通知不适用于我的 asp.net core 2.0 angular2 应用程序答案

【问题标题】：Why toastr notifications not working with my asp.net core 2.0 angular2 application为什么 toastr 通知不适用于我的 asp.net core 2.0 angular2 应用程序
【发布时间】：2017-10-19 05:36:20
【问题描述】：

要在项目中安装 toastr-ng2，请遵循以下命令：

npm install toastr-ng2 --save

在 ClientApp vehicle-form.component.ts 文件中添加如下语法

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

// third party module to display toast 
import { ToastrModule } from 'toastr-ng2';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { VehicleFormComponent } from './components/vehicle-form/vehicle-form.component';



@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        VehicleFormComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule, 

        ToastrModule.forRoot(),
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'vehicles/new', component: VehicleFormComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ],
    providers:[

        ]
})
export class AppModuleShared {
}

使用 toasty 任何组件语法如下

constructor(private toastyService: ToastrService) { }    
this.toastyService.success('Data inserted Successfully');

现在，没有收到通知消息？我错过了哪一步才能收到通知？

【问题讨论】：

你是否包含了css？
@Carsten，不，我只是运行 npm 命令然后开始使用 toastr 不包含 css，如何为 toastr asp.net core 2.0 Angular 模板应用程序包含 css？
@shamim 对您的问题进行了分类
@Sajeetharan 可能是 css 缺失问题。

标签： .net angular asp.net-core angular2-template

【解决方案1】：

你必须这样做，

 constructor(
    private toastrService: ToastrService,
    private viewContainerRef: ViewContainerRef
  ) {
    this.toastrService.viewContainerRef = this.viewContainerRef;
  }
  ngOnInit() {
    this.toastrService.success('Data inserted Successfully', 'Toastr fun!');
  }

【讨论】：

文档 (npmjs.com/package/toastr-ng2) 没有提到 viewContainerRef
我猜你需要通过容器
你为什么猜？它的文档在哪里？

【解决方案2】：

可能和Toast notification not working in angular一样的问题

下面跟卡斯滕说的一样。

当我处理相同的course from Mosh Hamedani on Udemy时

我可以通过以下步骤解决这个问题：

从 https://github.com/akserg/ng2-toasty 下载 CSS 文件，无论是 bootstrap、default 还是 material
将它放在vega/ClientApp/src/toasty-style-bootstrap.css 下，以防你使用 Bootstrap 主题
确保您的vega/ClientApp/angular.json 包含相应部分中的新样式文件

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css",
      "src/toasty-style-bootstrap.css"
],

【讨论】：