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",
],