PrimeNG角2模式從另一個組件

調用時我有一個表與部件我要實現在表上按下行時模態（對話）將出現定義多行不工作。所以我創建了一個單獨的組件的對話框但它不工作PrimeNG角2模式從另一個組件

表組件代碼是在這裏（相關部分）

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，但沒有模態出現在屏幕上。

來源

2017-01-13 naoru

b.t.w即時通訊使用當前最新primeng 1.1.4 – naoru

即時嘗試使用appendTo屬性，但沒有成功 – naoru

仍然是一個問題..... – naoru

這樣的情況下，在幫助別人

在對話框創建一個新的組件，並放置到其選擇的包裝組件的HTML文件

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

現在你需要某種事件上發射該組件即時通訊使用與EventEmitter共享服務將數據傳遞給對話框的成分，基本上把它的顯示屬性設置爲true

來源

2017-02-13 18:17:19 naoru

我有同樣的問題，我下面的雙向綁定工作。無需共享服務。

從primeng基礎對話框中捕獲onAfterClose事件。
定義的輸出變化EventEmitter。
散發出的onAfterClose處理該事件。

EditDialogComponent：

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

希望這會有所幫助。

來源

2017-03-16 19:44:07

PrimeNG角2模式從另一個組件

回答

相關問題