小编Mar*_* W.的帖子

ngx-toastr,吐司没有在Angular 7中显示

我目前正在使用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)

我无法弄清楚我做错了什么,有没有人有类似的经历?提前谢谢了!

toastr angular

45
推荐指数
6
解决办法
3万
查看次数

标签 统计

angular ×1

toastr ×1