侧边栏壁纸
博主头像
微笑涛声

一个在编程学习中逐渐变强的孩子! 热爱编程,喜欢软件开发!

  • 累计撰写 131 篇文章
  • 累计创建 63 个标签
  • 累计收到 7 条评论
隐藏侧边栏

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

微笑涛声
2020-04-15 / 0 评论 / 0 点赞 / 375 阅读 / 287 字
温馨提示:
本文最后更新于 2022-09-28,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

安装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

0

评论