[轉]Angular——提示框

本文轉自：https://blog.csdn.net/whm18322394724/article/details/80177950

版權聲明：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/whm18322394724/article/details/80177950

正文

  小菜繼續學習積累中，今天做了一下提示框，也是小菜模仿的，所以下面我就來簡單解釋一下如何制作提示框，以及解析一下代碼和邏輯。 
  其實整個邏輯思路很簡單，就是先在前台用HTML的p-dialog等元素組裝彈框，然后和后台綁定數據，而后台則寫方法通過調用方法告訴前台什么時候提示什么內容。具體代碼解析如下。 

◆前台

1.彈框樣式 

2.代碼解析

<!--使用p-dialog元素做提示框--> <p-dialog header="提示" [(visible)]="displayP" modal="modal" width="400" [responsive]="true"> <!--使用p標簽來顯示提示內容，並讓其居中，具體什么內容使用插值表達式與后台進行綁定，據情況而提示--> <p style="text-align:center"> {{messages}} </p> <!--腳注：腳注部分放置一個確定按鈕，點擊確定表示用戶收到該提示，然后關閉提示框--> <p-footer> <button type="button" pButton (click)="displayP=false" label="確定"> </button> </p-footer> </p-dialog>

 

◆后台

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']) }