关闭后启动对话框未打开答案

【问题标题】：primeng dialog does not open after closing关闭后启动对话框未打开
【发布时间】：2022-03-10 21:06:24
【问题描述】：

我在另一个组件中创建了对话框作为组件。对话框打开没有问题，但在关闭并尝试重新打开后它不可见。

父组件

import { Component,OnInit } from '@angular/core';
import { PostComponent } from './post/post.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  viewProviders: [PostComponent]
})
export class AppComponent implements OnInit {

  display: boolean;

  ngOnInit(): void {
  }
  
  openAdvancedSearch() {
    this.display = true;
    console.log("Display is set");
  }
 
  constructor() {
  }
}

父级html

 <app-post [display]="display"></app-post>
  <button type="button" class="btn btn-primary col" 
                (click)="openAdvancedSearch()" [style.width.px]="150">Advanced Search</button>

对话框组件

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {

  @Input()
  display: boolean = false;
  publishedAfter: Date;
  publishedBefore:Date;

  constructor() { }

  ngOnInit() {
  }
}

Dialog html 有一个按钮，点击它会关闭对话框

  <p-dialog header="Title" [(visible)]="display" [width]="500" 
      [contentStyle]="{'overflow':'visible'}">
     <p-calendar [(ngModel)]="publishedAfter" [showIcon]="true" 
                    [style.width.px]="150"></p-calendar>

     <p-calendar [(ngModel)]="publishedBefore" [showIcon]="true" 
                    [style.width.px]="150"></p-calendar>

     <p-footer>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <button (click)="display=false">Close</button>
      </div>  
     </p-footer>  
  </p-dialog>

【问题讨论】：

感谢我能够解决问题输出 EventEmitter。关键是只从父组件而不是从子组件修改显示属性的值。当 close 被调用时，会生成一个事件，该事件将被父级拦截，并将 display 的值设置为 false
您可以在答案中写下相同的内容并接受它，这样其他人就不会知道您的问题是否已经解决了。

标签： angular modal-dialog primeng

【解决方案1】：

感谢我能够解决问题输出 EventEmitter。关键是只从父组件而不是从子组件修改显示属性的值。当 close 被调用时，会产生一个事件，该事件将被父级拦截，并将 display 的值设置为 false

【讨论】：

@Vivek，您能否也提供您的答案。如何使用 EventEmitter？

【解决方案2】：

添加代码解决问题

子组件 HTML

<p-dialog header="Reschedule Unassigned Task" [(visible)]="_display" modal="modal" width="700" [responsive]="true" [blockScroll]=true (onHide)="onHide($event)">

子组件

@Input() get display(): string {
    return this._display;
}

set display(value: string) {
    console.log('set display ' + value)
    this._display = value;
    this.onDisplayChange.emit(this._display);
}

@Output() onDisplayChange: EventEmitter<string> = new EventEmitter<string>();

@Output() onClose: EventEmitter<string> = new EventEmitter<string>();

onHide(e: any) {
    this.onClose.emit(this._display);
}

父组件调用子组件

<reschedule-dialog [(display)]="rescheduleDialogDisplay"
                           (onClose) = "onClose()"
                           [selectedItem]="selectedItemToReschedule

onClose() {
    this.rescheduleDialogDisplay = null;
    this.selectedItemToReschedule = null;
}

【讨论】：

【解决方案3】：

我知道这是一个老问题，但我仍然为这个问题提供了不同的解决方案。如果您不想从子组件生成输出事件，则可以设置使用服务来设置 p-dialog 控件的可见属性。

<p-dialog [(visible)]="dialogContentService.showDialog" [modal]="true"

在子组件中：

this.dialogContentService.showDialog  = false;

【讨论】：

【解决方案4】：

我设法解决了这个问题，但所有答案都遗漏了一些关键点。

当您单击右上角的“关闭”时，它会在子组件中运行 close()。

在这里您必须将更改发送回父级：

export class child-comp implements OnInit { 
@Input() showDialog: boolean; 
@Output() closeDialog = new EventEmitter<any>();
  close() {
    console.log('calling on close'); 
    this.closeDialog.emit();
  }
}

然后在父组件中，您需要接收此发射并对其进行操作，以更新显示状态“仅控制父组件中的显示状态”，如前所述。

<child-comp [showDialog]="showDialog" (closeDialog)="updateDialog()"></child-comp>

updateDialog() {
  this.showDialog = false;
  console.log(this.showDialog);
}

希望对你有所帮助

【讨论】：