我目前正在使用Angular 7开发一个Web应用程序.我想包含ngx-toastr来向用户发送通知,但它没有按预期工作.当我触发吐司时没有任何反应,除了一个吐司大小的盒子出现在右下角,但只有当它被光标悬停时.下面是一个如何触发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) { }
}
Run Code Online (Sandbox Code Playgroud)
我在我的项目的angular.json文件中包含库css文件,如下所示:
...
"styles": [
"src/styles.scss",
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/ngx-toastr/toastr.css"
],
...
Run Code Online (Sandbox Code Playgroud)
在我的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'
})
]
...
Run Code Online (Sandbox Code Playgroud)
我无法弄清楚我做错了什么,有没有人有类似的经历?提前谢谢了!