我在我的角度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>
我能够收到消息,但它不是通知,它只是作为纯文本消息。你能告诉我错过的事吗。
答案 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>