他のコンポーネントから呼び出されたときに角2角形が機能しない

Question

コンポーネントに多くの行が定義されています テーブルの行を押すとモーダル（ダイアログ）が表示されます。 は、だから私は、ダイアログのための独立したコンポーネントを作成しました、まだそのテーブル・コンポーネント・コード

を働いていないここにある（関連部分）

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

私は同じ問題を抱えていました。共有サービスの必要はありません。

1. primengベースダイアログからonAfterCloseイベントを取得します。
2. 出力変更EventEmitterを定義します。
3. 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> 

は、その後、あなたがいないtypescriptですコードで、親コンポーネントのテンプレートでインスタンス化することによってあなたのEditDialogComponentを使用することができます。コンポーネントのコードで

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

あなたはtrueに表示属性を設定することで、ダイアログを呼び出すことができます。 EditDialogComponentが必要な場合はインポートできません。

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

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

これが役に立ちます。