prime-ng DynamicDialog 页脚中的自定义按钮

Question

PrimeNG、Angular 17。

我在 DynamicDialog 页脚模板上有一个自定义按钮“更改状态”。对话框运行良好，按钮事件正在页脚模板上运行。但是，我想将调用从 DialogFooter.changeState() 转发到 DialogComponent.changeState() 函数。我无法弄清楚如何在 DynamicDialogRef 组件上添加自定义侦听器。我的技巧是创建一个服务并设置一个 EventEmitter 主题，我相信它会起作用。我想看看是否有任何优雅的方法可以做到这一点。

页脚模板：

@Component({
    selector: 'footer',
    standalone: true,
    imports: [
        ButtonModule
    ],
    template:  `
    <p-button
        type="button" 
        label="Save" 
        icon="pi pi-save" 
        severity="success"
        (click)="closeDialog({ buttonType: 'Save', summary: 'Record saved' })"
        class="p-button-rounded p-button-text p-button-success"
        [disabled]="isDisabled"/>
    <p-button 
        type="button" 
        label="Cancel" 
        icon="pi pi-times" 
        severity="danger"
        (click)="closeDialog({ buttonType: 'Cancel', summary: 'No record saved' })"
        class="p-button-rounded p-button-text p-button-info"></p-button>
    <p-button
        type="button" 
        label="Change State" 
        icon="pi pi-edit" 
        severity="success"
        (click)="changeState()"
        class="p-button-rounded p-button-text p-button-success"/> `
})
export class DialogFooter {
    constructor(public ref: DynamicDialogRef,
        private config:DynamicDialogConfig) {}
    isDisabled:boolean = false;

    closeDialog(data:any) {
        this.ref.close(data);
    }

    changeState() {
        console.log("Change state");
    }
}

对话框组件.ts

导出类 DialogComponent 实现 OnInit {

isDisabled:boolean = false;

constructor(private recService: RecordService, 
            private dialogService: DialogService, 
            private ref: DynamicDialogRef,
            private config:DynamicDialogConfig) {}

ngOnInit() {
}

closeDialog(data:any) {
    this.ref.close(data);
}
changeState() {
  this.isDisabled=!this.isDisabled;
  // This should be called from DialogFooter
}

我在对话框中使用 isDisabled 属性来启用/禁用输入元素。

        <input pInputText id="zoneName" [(ngModel)]="rec.name" [disabled]="isDisabled"/>

干杯

添加的编辑：

以我有限的知识添加了菜鸟解决方案:)。

在调用组件中：

  export class ZonesComponent implements OnInit {
       @Output() emitter: EventEmitter<any> = new EventEmitter();
       ....

       showDialog() {
           this.ref = this.dialogService.open(
                           ZoneDialogComponent, {
                            data: {
                                id: id,
                                emitter: this.emitter},
               .....
           });

       }

监听对话框组件中的事件：

ngOnInit() {
    this.config.data.emitter.subscribe((data:any) => {
      console.log("Received emitter event. " + data);
      this.changeState();
    });
}

从页脚生成事件并将其转发到对话框组件

export class DialogFooter {

    changeState() {
        console.log("Change state");
        this.config.data.emitter.emit("test");
        console.log("Even sent!");
    }
}

到目前为止效果很好。

Answer 1

在 Angular 中，您可以使用 EventEmitter 将

changeState()

函数的调用从

DialogFooter

中继到

DialogComponent

。这使您能够在

DialogFooter

中启动事件并在

DialogComponent

中处理该事件，而无需服务。