客户端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("成功信息！");

效果演示

====

成功提示

错误提示

警告提示