Question

我需要编写一个自定义@component来显示始终有三个配置变量的确认对话框： confirmButtonLabel，messageText，acceptFunction。

我的目标是在一个“配置”对象中传输所有这三个。

这就是component.ts的样子：

import {Component, Input, OnInit} from '@angular/core';
import {Configuration} from '../../model/confirmModal.model';

@Component({
  selector: 'app-my-confirm-dialog',
  templateUrl: './myConfirmDialog.component.html'
})

export class myConfirmDialogComponent implements OnInit {
  ngOnInit(): void {}
  accept():void {
   this.configuration.accept();
  }

  @Input()
   configuration: Configuration;
}

有一个对象包含所有配置

configurations = {  
  config1: {
    confirmButtonLabel: 'Yep',
    message: 'Do you want to confirm?',
    accept: (): void => { alert('confirmed'); }
  },
  config2: {
    confirmButtonLabel: 'Yop',
    message: 'Do you want to confirm 2?',
    accept: (): void => { alert('confirmed 2'); }
  },
 };

这就是component.html的样子：

<p-confirmDialog class="my-confirm-dialog" icon="fa fa-question-circle" [message]="configuration.message" #cd>
 <p-footer>
   <p-button label="Cancel" (onClick)="cd.reject()"></p-button>
   <p-button (onClick)="accept()"></p-button>
 </p-footer>
</p-confirmDialog>

我把这个组件放在父母的内部。

<app-my-confirm-dialog [configuration]="confirmations"></app-my-confirm-dialog>

最后我触发显示如下对话框：

ngOnInit{
  this.someEntry = {
    label: 'Config1Dialog', 
    command: (event) => this.showMyConfirmDialog(this.configurations.config1);
};}
...
showMyConfirmDialog = (confirmDialog): void => {
  this.confirmLabel = confirmDialog.confirmLabel;
  this.confirmationService.confirm(confirmDialog);
}

所以现在发生的是，对话框的消息始终是正确的，但是confirm-button-label和on-confirm-function都不起作用。我现在不太了解角度，并且没有找到任何关于这种情况的好的指示。

Angular + PrimeNG自定义confirmDialog

0 个答案: