PrimeNG angular 2 模态从另一个组件调用时不工作

Question

我有一个 table 在一个组件中定义了很多行我想实现的是，当在 table 上按下一行时，将出现一个模式（对话框）。所以我为对话框创建了一个单独的组件，但它不起作用

table组件代码在这里（相关部分）

import { SwatModalComponent } from '../swat-modal/swat-modal.component';

modal: SwatModalComponent;

  constructor(private alertService : AlertService) {
    if(alertService.filteredParam){
      //we have a filtered processAlertSwitchName
      this[alertService.filteredParam.name] = alertService.filteredParam.value;
      alertService.filteredParam = null;
    }
    this.registerEvents();
    this.modal = new SwatModalComponent();
  }

showModal() {
    this.modal.showDialog();
  }

对话框代码基本上是从文档中复制粘贴的

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

import {DialogModule} from 'primeng/primeng';

@Component({
  selector: 'app-swat-modal',
  templateUrl: './swat-modal.component.html',
  styleUrls: ['./swat-modal.component.sass']
})
export class SwatModalComponent implements OnInit {

  display: boolean = false;

    showDialog() {
        this.display = true;
    }

  constructor() { }

  ngOnInit() {
  }

}

html代码在这里

<p-dialog header="Alert Dialog" [(visible)]="display" modal="modal" width="300" responsive="true">
    <header>
        Header content here
    </header>
    Content
    <footer>
        Footer content here
    </footer>
</p-dialog>

在调试时我看到显示的 SwatModalComponent 属性被设置为 true，但屏幕上没有出现模态。

Answer 1

万一帮助了某人

为对话框创建一个新组件并将其选择器放入包装器组件html文件

<app-mac-dialog></app-mac-dialog>

现在您需要某种事件来触发该组件我使用带有 EventEmitter 的共享服务将数据传递给对话框组件，并基本上将其显示属性设置为 true

Answer 2

我遇到了同样的问题，下面的双向绑定对我有用。不需要共享服务。

从 primeng 基础对话框捕获 onAfterClose 事件。
定义输出变化 EventEmitter。
在 onAfterClose 处理程序中发出事件。

编辑对话框组件：

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

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


  @Input() item: ItemClass; // you entity to edit
  @Input() visible: boolean = false;
  @Output() visibleChange:EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  afterHide() {
    this.visibleChange.emit(false);
  }
}

模板：

<p-dialog header="Godfather I" [(visible)]="visible" (onAfterHide)="afterHide()" modal="modal" responsive="true">
    <p>Some content....</p>
        <p-footer>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                <button type="button" pButton icon="fa-close" (click)="visible=false" label="Cancel"></button>
                <button type="button" pButton icon="fa-check" (click)="visible=false" label="OK"></button>
            </div>
        </p-footer>
</p-dialog>

然后您可以通过在父组件的模板中实例化来使用您的 EditDialogComponent，而不是在打字稿代码中。

<edit-dialog [(visible)]="displayEditDialog" [item]="selectedItem"></edit-dialog>

在组件的代码中，您可以通过将 display 属性设置为 true 来调用对话框。如果需要 EditDialogComponent，则不导入。

...  
    selectedItem: ItemClass; // selected by table

    changeItem() {
        this.displayEditDialog = true;
    }
...

希望这对您有所帮助。

PrimeNG angular 2 模态从另一个组件调用时不工作

PrimeNG angular 2 modal not working when called from another component

primeng

angular