Angular——提示框

比眉伴天荒 2022-05-26 13:26 396阅读 0赞

今天做了一下提示框，也是模仿的，所以下面我就来简单解释一下如何制作提示框，以及解析一下代码和逻辑。  
  其实整个逻辑思路很简单，就是先在前台用HTML的p-dialog等元素组装弹框，然后和后台绑定数据，而后台则写方法通过调用方法告诉前台什么时候提示什么内容。具体代码解析如下。

# <table>   <tbody>    <tr>     <td align="left"><font>*前台</font></td>    </tr>   </tbody>  </table> #

1.弹框样式  
![这里写图片描述][70]

2.代码解析

<p-dialog header="提示" [(visible)]="displayP" modal="modal" width="400" [responsive]="true">
    
      <p style="text-align:center">
        {
       {messages}}
      </p>
      
      <p-footer>
        <button type="button" pButton (click)="displayP=false" label="确定">
        </button>
      </p-footer>
    </p-dialog>

# <table>   <tbody>    <tr>     <td align="left"><font>*后台</font></td>    </tr>   </tbody>  </table> #

1、封装

//定义提示框的可见性为Boolean值
      displayP: boolean;
      //设提示框提示内容初始值为空
      messages: "";
      //将提示框封装成一个方法，以便重用
      showDialog(string) {
        //将参数赋给messages
        this.messages = string;
        //提示框可见
        this.displayP = true;
      }

2、调用  
  这里调用我随意选取的一个方法作为例子，其实最关键的代码就是一句 ——**this.showDialog(“提示信息”)**

next() {
        //先拿到缓存中的数据
        let teacherInfo = JSON.parse(localStorage.getItem("teacherInfo"));
        //判断是否至少选中表格中的一条数据
        if (teacherInfo == null) {
        //调用提示框方法，并给这个方法传递参数
          this.showDialog("请先选中一名教师");
          //alert("请先选中一名教师");
          return;
        }
        //存放到大model中
        this.publicteachModel.teacherId = teacherInfo.code;
        //跳转
        this.router.navigate(['workspace/education-plan/course-info'])
      }

[70]: /images/20220526/20ae1de56ed1403bb5b86203e0d35169.png