客户端toast消息插件的集成步骤

安装toast消息插件

一、导入相关依赖

  • app.module.ts 中的imports导入ToastModule
  • app.module.ts 中的provider中导入MessageService

二、制作通用的消息提示插件toastservice

  • 新建toastservice命令:ng g service service/toast
  • toastservice完整代码
import { Injectable } from '@angular/core';
import {MessageService} from "primeng/api";

@Injectable({
  providedIn: 'root'
})
export class ToastService {

  constructor(private messageService: MessageService) { }
  //显示成功信息
  public showSuccess(msg:string){
    this.messageService.add({severity:'success', summary:'成功', detail:msg});
  }


  //显示警告信息
  public showWarnning(msg:string){
    this.messageService.add({severity:'warn', summary:'警告', detail:msg});
  }


//显示错误信息
  public showError(msg:string){
    this.messageService.add({severity:'error', summary:'错误', detail:msg});
  }

}

三、编辑appcomponent.html

  • <router-outlet></router-outlet>的上方加入
<p-toast position="top-center"></p-toast>

四、编辑需要加入消息提示的组件

  • 逻辑部分(.ts文件)的constructor里面加入:
private toastservice:ToastService
  • 需要运用的地方加入:
this.toastservice.showError("错误信息!");
this.toastservice.showWarnning("警告信息!");
this.toastservice.showSuccess("成功信息!");

### 效果演示

成功提示

image

错误提示

image

警告提示

image

赞(3) 打赏
未经允许不得转载:微笑涛声 » 客户端toast消息插件的集成步骤
分享到:
标签:

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏