Angular2、PrimeNg使用讲解之p-confirmDialog（弹出框）实例

注：下面我介绍的是 p-confirmdialog（对话框） 在完整的项目中的用法,，以及在嵌套使用的时候的用法，关于在单个页面中的用法可以参考官网。

1、引入confirmdialogmodule模块

在项目中全局引入confirmdialogmodule模块，需要在app.modules.ts文件引入

import {

  confirmdialogmodule,

  confirmationservice

} from 'primeng/primeng';

import: [ confirmdialogmodule],

providers: [ confirmationservice ]

2、插入标签

在项目中，一般是将标签放在文件main.component.html文件中，以便于用于全局。也就是说，你只需要在main.component.html中定义一次就可以在整个项目中使用了。

语法：

<p-confirmdialog [appendto]="'body'" [acceptlabel]="'确定'" [rejectlabel]="'取消'"></p-confirmdialog>

3、单次使用（不嵌套使用）

（1）在当前页引入

import {confirmationservice} from 'primeng/primeng';

（2）依赖注入

constructor(private confirmationservice: confirmationservice) {}

（3）函数

在你需要弹出框的位置写函数：

this.confirmationservice.confirm({

  message: '弹出框的详细内容',

  header: '弹出框的标题',

  icon: 'fa fa-info-circle'

});

在该函数中的header、message等性质你可以参考官网，根据你的需要来添加。在此我就不赘述了。

官网地址：https://www.primefaces.org/primeng/#/confirmdialog

4、嵌套使用

嵌套使用相对而言就复杂很多了。

前两个步骤跟上述的单次使用一样，在此不再赘述。

oncomfirme(){

this.confirmationservice.confirm({

  message: '弹出框的详细内容',

  header: '弹出框的标题',

  icon: 'fa fa-info-circle',

  acceptlabel: '是',

  rejectlabel: '否',

  accept: () => {

    this.onnewlocationinfo();

  }

});

}

onnewlocationinfo(msg){

this.confirmationservice.confirm({

  message: '弹出框的详细内容',

  header: '弹出框的标题',

  icon: 'fa fa-info-circle',

  acceptlabel: '是',

  rejectlabel: '否'

 });

}

到此为止一个弹出框的嵌套完成了。你会发现在关闭第一个弹出框后，第二个弹出框不会出现，而且还不会抱任何的错。这是什么原因呢？

开始的时候我就说过，在项目中，一般是将标签放在文件main.component.html文件中，以便于用于全局。也就是使所有的弹出框用的都是同一个弹出框标签。

当我们单击第一个弹出框的“是”按钮的时候，会调用函数 onnewlocationinfo();弹出第二个弹出框，并关闭第一个弹出框。因此，我们只能看到第一个弹出框关闭，而看不到第二个框打开，因为第二个弹出框在被打开的同时就被关闭了。该如何解决这个问题呢？

很简单，在你需要使用嵌套弹出框的的html文件中添加标签p-confirmdialog,并给一个key值。

<p-confirmdialog [appendto]="'body'" [key]="'newlocationconfirm'"></p-confirmdialog>

<p-confirmdialog [appendto]="'body'" [key]="'mapconfirm'"></p-confirmdialog>

然后，在你的函数中将key值添加进去。

oncomfirme(){

this.confirmationservice.confirm({

  message: '弹出框的详细内容',

  header: '弹出框的标题',

  icon: 'fa fa-info-circle',

key: 'newlocationconfirm',

  acceptlabel: '是',

  rejectlabel: '否',

  accept: () => {

    this.onnewlocationinfo();

  }

});

}

onnewlocationinfo(msg){

this.confirmationservice.confirm({

  message: '弹出框的详细内容',

  header: '弹出框的标题',

  icon: 'fa fa-info-circle',

key: 'mapconfirm',

  acceptlabel: '是',

  rejectlabel: '否'

 });

}

这样问题就得到了解决。标签中的key值就相当于关键字的存在，通过这个key来指定用哪个标签，而不是用那个全局的标签。