angular primeng 弹出对话框修改

功能目标：

点击列表项字符串弹出对话框，修改后关闭对话框，替换列表项原字符串。

点击“background"时弹出图2：

点击【apply】，列表框background变为background1

组件：

TextareaDialog----提供图2的编辑对话框；

LayersWindow----列表例子。

依赖primeng组件ButtonModule，InputTextareaModule 和 DialogModule：

import { ButtonModule } from 'primeng/button';import { InputTextareaModule } from 'primeng/inputtextarea';import { DialogModule } from 'primeng/dialog';

LayersWindow 列表html：

<p-dialog header="layers" [(visible)]="display"><div style=width:320px;height:200px;><div *ngFor="let layer of layers" class="ui-g"><a class="ui-g-2" [ngClass]="layer.locked?'pi pi-lock':'pi pi-lock-open'" (click)="layer.locked=!layer.locked"></a><a class="ui-g-2" [ngClass]="layer.visable?'fa fa-eye':'fa fa-eye-slash'" (click)="layer.visable=!layer.visable"></a><span class="ui-g-8" (click)="beforerename(layer)">{{layer.name}}</span></div></div><p-footer><div class="ui-dialog-buttonpane ui-helper-clearfix"><button type="button" pButton icon="pi pi-trash" (click)="delete()" title="removeIt"></button><button type="button" pButton icon="pi pi-plus" (click)="addLayer()" title="addLayer"></button></div></p-footer>
</p-dialog>
<app-textarea-dialog #renamedialog width="30em" height="3em" header="rename" [acceptFn]="afterrename"></app-textarea-dialog>

在html中中关键是2处：

在span的click事件处绑定beforerename，并传入layer对象作为参数；
在下方加入编辑对话框TextareaDialog，并传入afterrename回调函数；

相应的ts代码：

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { TextareaDialog } from '../textarea/textarea.component';@Component({selector: 'app-layers-window',templateUrl: './layers.component.html',styleUrls: ['./layers.component.css']
})
export class LayersWindow implements OnInit {@ViewChild('renamedialog', { static: false }) renameDialog: TextareaDialog;@Input() display:boolean;layers:Layer[];selectedLayer:Layer;constructor(){this.display = false;this.layers=[{locked:false,visible:true,name:"background",zIndex:0},{locked:true,visible:false,name:"untitledLayer",zIndex:1}];}ngOnInit() {}delete(){}addLayer(){}beforerename(layer:Layer){this.selectedLayer = layer;this.renameDialog.sender = this;this.renameDialog.value = layer.name;this.renameDialog.display = true;}afterrename(newName:string){if(this.selectedLayer){this.selectedLayer.name=newName;}}
}interface Layer{locked:boolean;visible:boolean;name:string;zIndex:number;
}

注意，在beforename时需要将sender传给renameDialog，否则afterrename回调时this将是renameDialog。

TextareaDialog 的html:

<p-dialog [header]="header" [(visible)]="display" [modal]="true"><textarea #input pInputTextarea [style.width]="width" [style.height]="height" [(ngModel)]="value"></textarea><p-footer><button type="button" pButton (click)="display=false" class="ui-button-secondary" label="cancel"></button><button type="button" pButton (click)="apply(input.value)" label="apply"></button></p-footer>
</p-dialog>

在html中中关键是【apply】按钮绑定apply方法并传入#input 的新值。ts代码：

import { Component, OnInit, Input } from '@angular/core';@Component({selector: 'app-textarea-dialog',templateUrl: './textarea.component.html',styleUrls: ['./textarea.component.css']
})
export class TextareaDialog implements OnInit {@Input() header:string;@Input() width:string;@Input() height:string;@Input() sender:any;@Input() value:string;@Input() display:boolean;@Input() acceptFn:(newValue:string)=>any;constructor() { this.header = "editTooltip"this.width="320px";this.height="200px";this.display = false;}ngOnInit() {}apply(newValue:string){if(this.acceptFn){this.acceptFn.apply(this.sender,[newValue]);}this.display = false;}
}

BYW：

图标中使用了primeng和fontawesome的图标，需要安装相应的包，并在angular.json中加入相应的css。

"styles": ["node_modules/primeicons/primeicons.css","node_modules/font-awesome/css/font-awesome.min.css",
],

angular primeng 弹出对话框修改相关推荐

vb.net 弹出对话框修改按钮名_批量修改日期格式
在一些手工录入的表格里,会因为输入不规范导致出现各种各样的日期格式,如下图: 在这种状态下,进行日期的筛选统计,或者透视分析,都会因为日期格式的不规范,导致无法直接得到结果.如果是数据量比较大的时候, ...
vb.net 弹出对话框修改按钮名_Microsoft Excel怎么批量快速修改批注？
知识改变命运,科技成就未来.在使用Microsoft Excel的时候,可能会对单元格添加批注.如果需要对单元格的批注进行批量修改,几个批注处理起来很简单,但是批注过多该怎么办呢?通过Microsof ...
vb.net 弹出对话框修改按钮名_无需越狱！iOS12修改运营商名称方法和技巧
很早前我们IT数码通小编分享过iPhone无需越狱修改运营商名称的方法,不过那个时候仅支持iOS11系统,iOS12系统用户表示非常失望.那个时候有非常多的粉丝咨询我们:iOS12怎么修改运营商名称? ...
万水千山ABP - 弹出对话框禁用回车
模态对话框中禁用回车 ABP Zero 中,使用弹出对话框进行实体编辑,回车时会自动保存并关闭对话框.那么如何禁用这个回车功能 ? 查看实体列表视图 index.cshtml 所对应加载的脚本文件 i ...
php 弹窗代码大全,PHP_asp.net弹出窗口代码大全，//关闭,父窗口弹出对话框,子窗 - phpStudy...
asp.net弹出窗口代码大全 //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write(""); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 th ...
jQuery Mobile弹出对话框后不刷新原页面，保持原页面内容不变
使用jQuery Mobile开发移动应用程序时,在一个页面上弹出对话框,关闭对话框后,发现原来的页面被刷新了.如果原页面上有一些已经选择或者填写的数据,则这些数据就会丢失.这时候,就需要对对话框的返 ...
Web开发中的弹出对话框控件介绍
Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了.不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由 ...
QT学习笔记（六）——QT弹出对话框并在主窗口调用对话框的信息
QT弹出对话框并在主窗口调用对话框的信息,显示影像最近封控,大部分时间都在自己学习写代码,有点feel 了哈,自己摸出来一个简单的qt 界面,也实现了自己想要的功能.本篇博客主要记录一下,如何弹出对 ...
php网页弹出输入对话框,php和js实现弹出对话框实例分享
js可以实现弹出对话框,本文主要和大家分享php和js实现弹出对话框实例,希望能帮助到大家. 1. php弹出对话框//弹出对话框<?phpecho " //关闭当前页 echo &q ...