Angular2+PrimeNg踩坑之 p-confirmDialog （弹出框）

注：下面我介绍的是 p-confirmDialog（对话框） 在完整的项目中的用法,，以及在嵌套使用的时候的用法，关于在单个页面中的用法可以参考官网。官网地址：https://www.primefaces.org/primeng/#/

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来指定用哪个标签，而不是用那个全局的标签。