Question

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

父组件

＆＃13;

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

＆＃13;

父html

＆＃13;

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

＆＃13;

对话框组件

＆＃13;

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

＆＃13;

Dialog html点击一个按钮关闭对话框

＆＃13;

  <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>

＆＃13;

Answer 1

谢谢我能够解决问题输出EventEmitter。 Crux只是从父组件修改显示属性的值，而不是从子组件修改。当调用close时，生成一个将被父级截获的事件，并将display值设置为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

我知道这是一个古老的问题，但是仍然为该问题提供另一种解决方案。如果您不想从子组件中生成输出事件，则可以设置use service来设置p对话框控件的visible属性。

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

在子组件中：

this.dialogContentService.showDialog  = false;

primeng对话框在关闭后无法打开

3 个答案: