关闭后 primeng 对话框不打开

Question

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

Parent 分量

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() {
  }
}

parent 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() {
  }
}

对话框 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>

Answer 1

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

Answer 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;
}

Answer 3

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

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

在子组件中：

this.dialogContentService.showDialog  = false;

Answer 4

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

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

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

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

然后在父组件中，您需要接收此发射并对其执行一个函数来更新显示状态 'Only control the display state in the parent component'，如前所述。

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

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

希望对您有所帮助

关闭后 primeng 对话框不打开

primeng dialog does not open after closing

angular

modal-dialog

primeng