ang2のng2-toastyは動作しません

Question

私のAngle 2.0.0アプリケーションでng2-toasty： "^ 2.3.0"をインストールしました。私はアプリのモジュールに次の行

import { ToastyModule } from 'ng2-toasty'; 

@NgModule({ 
    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.   
     ToastyModule.forRoot() 
    ], 

そして、私のTSファイルで、私は

import { ToastyService, ToastyConfig, ToastOptions, ToastData } from 'ng2-toasty'; 

constructor(private toastyService: ToastyService, private toastyConfig: ToastyConfig) { 
     this.toastyConfig.theme = 'default'; 
    } 

onClick() { 
     debugger; 
     this.toastyService.default({ 
      title: "Toast It!", 
      msg: "Mmmm, tasties...", 
      showClose: true, 
      timeout: 5000, 
      theme: "default" 
     }); 

     // Or create the instance of ToastOptions 
     var toastOptions: ToastOptions = { 
      title: "My title", 
      msg: "The message", 
      showClose: true, 
      timeout: 5000, 
      theme: 'default', 
      onAdd: (toast: ToastData) => { 
       console.log('Toast ' + toast.id + ' has been added!'); 
      }, 
      onRemove: function (toast: ToastData) { 
       console.log('Toast ' + toast.id + ' has been removed!'); 
      } 
     }; 
     // Add see all possible types in one shot 
     this.toastyService.info(toastOptions); 
     this.toastyService.success(toastOptions); 
     this.toastyService.wait(toastOptions); 
     this.toastyService.error(toastOptions); 
     this.toastyService.warning(toastOptions); 
    } 

のようなコードを持っており、HTMLに私は

<button (click)="onClick()">Click</button> 
     <ng2-toasty></ng2-toasty> 

を持っているが、私はすることができる午前含ま

メッセージを受け取りますが、それは通知として来ません。ただのテキストメッセージです。あなたは私が逃したものを私にさせてくださいできますか？

Answer 1

私は同じ問題がありました。 htmlのモジュールから.cssファイルの1つをインポートする必要があります。 bootstrap.cssを独自のファイル/assets/vendors/toasty-bootstrap.cssにコピーすることになりました（私のng_modulesディレクトリ内で参照したくないため）。

私はちょうどこのように取得より良い部品の内部のファイルを参照するための方法が、

<link href="/assets/vendors/toasty-bootstrap.css" rel="stylesheet"> 

<button (click)="onClick()">Click</button> 
    <ng2-toasty></ng2-toasty>