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处：

1. 在span的click事件处绑定beforerename，并传入layer对象作为参数；
2. 在下方加入编辑对话框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",
],