我目前正在使用Angular 7开发web应用程序。 我想包括ngx-toastr以向用户发送通知,但它的工作效果不如预期。 当我触发一个toast时,除了在右下角出现一个大小为toast的框(只有在鼠标悬停时才会出现),什么也没有发生。 以下是我如何触发toastr函数的示例。测试由按按钮触发。
import {ToastrService} from 'ngx-toastr';
@Component({
selector: 'app-action-controls',
templateUrl: './action-controls.component.html',
styleUrls: ['./action-controls.component.scss']
})
export class Notification implements OnInit {
test(){
this.toast.success("I'm a toast!", "Success!");
}
constructor(private toast: ToastrService) { }
}
我在我的项目中的angular.json文件中像这样包含了库的css文件:
...
"styles": [
"src/styles.scss",
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/ngx-toastr/toastr.css"
],
...
然后在我的app.module.ts文件中像这样:
...
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToastrModule} from 'ngx-toastr';
...
imports: [
...
BrowserAnimationsModule,
ToastrModule.forRoot({
timeOut: 1000,
positionClass: 'toast-bottom-right'
})
]
...
我无法弄清楚我做错了什么,有人有类似的经历吗?