Angular9中ngx-toastr样式无法正常工作
创始人
2024-10-22 17:00:57
0

在Angular 9中,可能会出现ngx-toastr的样式无法正常工作的问题。这个问题的原因是Angular 9中使用了Ivy引擎,它有自己的样式处理方式。为了解决这个问题,我们需要在Angular的styles.scss文件中添加以下代码:

@import '~ngx-toastr/toastr.css';

代码中的~符号表示从node_modules目录中引入。此外,我们还需要添加以下代码:

/* ngx-toastr 样式兼容 Angular 9 */
.toast{
  display: none !important;
}

这个样式的作用是将ngx-toastr的默认样式中的.toast隐藏掉,使得我们可以应用自定义的样式。我们可以在styles.scss文件中添加我们自己的样式:

/* ngx-toastr 样式 */
.toast-success{
  background-color: #4caf50;
  color: #fff;
}
.toast-error{
  background-color: #f44336;
  color: #fff;
}

这个样式的作用是将成功和错误消息的背景颜色和文字颜色分别设置为绿色和红色。除了这些样式之外,我们还可以添加其他样式,例如动画效果等。

最后,我们需要在组件中引入ngx-toastr模块,并在构造函数中初始化:

import { ToastrService } from 'ngx-toastr';

@Component({
  // ...
})
export class MyComponent {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('Success message');
  }

  showError() {
    this.toastr.error('Error message');
  }
}

通过以上步骤,我们可以在Angular 9中使用ngx-toastr,并应用我们自己的样式。

相关内容

热门资讯

透视神器!hhpoker辅助挂... 透视神器!hhpoker辅助挂(透视)hhpoker到底可以作必弊码(原来一直总是有挂)-哔哩哔哩1...
透视神器!模拟器打开hhpok... 透视神器!模拟器打开hhpoker(透视)hhpoker免费透视脚本(切实有透视)-哔哩哔哩1、首先...
透视攻略!hh poker软件... 透视攻略!hh poker软件(透视)hhpoker德州机器人(原来一直总是有透视)-哔哩哔哩1、很...
透视软件!潮汕激k辅助(辅助)... 透视软件!潮汕激k辅助(辅助)新九五辅助微信脚本(其实存在有挂)-哔哩哔哩一、新九五辅助微信脚本可以...
透视脚本!aapoker脚本怎... 透视脚本!aapoker脚本怎么用(透视)aapoker怎么拿好牌(一贯一直都是有透视)-哔哩哔哩1...
透视攻略!hhpoker到底可... 透视攻略!hhpoker到底可以作必弊码(透视)德扑HHpoker有挂吗(一贯一直总是有辅助器)-哔...
透视app!德州透视插件(透视... 透视app!德州透视插件(透视)hhpoker辅助器(真是有透视)-哔哩哔哩1、在德州透视插件插件功...
透视攻略!拱趴大菠萝有挂吗(透... 透视攻略!拱趴大菠萝有挂吗(透视)pokemmo手机版透视脚本(总是是有辅助器)-哔哩哔哩1、不需要...
透视脚本!欢聚水鱼脚本(辅助)... 您好,jj斗地主捕鱼辅助这款游戏可以开挂的,确实是有挂的,需要了解加去威信【485275054】很多...
透视软件!hhpoker作必弊... 透视软件!hhpoker作必弊实战视频(透视)hhpoker透视脚本下载(其实存在有脚本)-哔哩哔哩...