angular2中的ng2-toasty不起作用

时间:2017-05-04 15:12:23

标签: angular

我在我的角度2.0.0应用程序中安装了ng2-toasty:“^ 2.3.0”。

我在app模块中包含了这些行

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>

我能够收到消息,但它不是通知,它只是作为纯文本消息。你能告诉我错过的事吗。

1 个答案:

答案 0 :(得分:0)

我有同样的问题。您需要从html中的模块导入一个.css文件。 我最终将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>