大润发供应商网站,以房养老漫谈,美日军机闯识别区
注：下面我介绍的是 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来指定用哪个标签，而不是用那个全局的标签。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
我要评论
网友评论