【Angular】PrimeNG制作的提示框Dialog

前言

  在项目组自己真得是接触了不少东西，今天就来说一说里面的带有PrimeNG制作出来的提示框效果吧。

一、PrimeNG

   它是Angular2的一个客户端组件，可以独立于Bootstrap单独使用，也可以结合Bootstrap共同使用。

二、Dialog

   使用PRIMENG官网中的解释：
  Dialog is a container to display content in an overlay window.

三、Angular中的Dialog制作

  1.Module文件中添加代码
在myApp.module.ts文件中添加引用
  (1)

import {DialogModule} from 'primeng/primeng';
import {ButtonModule} from 'primeng/primeng';

  (2)

在@NgModule中import：
DialogModule,
ButtonModule

  2.Component组件中操作
  (1)myApp.component.html 添加标签元素

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

  (2)myApp.component.ts
在组件myAppComponent类中声明变量

  display: boolean = false;
  message: String = '';

  3.myApp.component.ts(TypeScript)中的具体使用

this.message="请上传音频、视频、图片、文档、pdf、表格格式文件"; //提示信息的内容
this.display=true;//提示框的visible属性为true，显示提示框

四、Dialog效果

  

小结

  Angular中的一些操作语法，与之前所学的HTML、JavaScript有相似之处，也有不同之处，两者联系起来学习会对这块知识的学习有一定的帮助。
感谢您的访问！