コンポーネントからのダイアログのshow（）イベントのトリガー

Question

UIからトリガーされたイベントが発生したときにダイアログを開こうとしています。私はhtmlでボタンをクリックしてみましたが動作していますが、コンポーネントから開く方法はわかりません。私はUIをクリックすると

HTML

<button (click)="cm.show()">ADD</button> 
<dialog class="mdl-dialog" #cm="dialog"> 
    <div class="wpr"> 
     <span (click)="cm.close()" class="close hairline"></span> 
    </div> 
    <div> 
     content... 
    </div> 
</dialog> 

コンポーネントは

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

    @Component({ 
     selector: 'test-app', 
     templateUrl: 'test.component.html', 
     directives: [ 
      DialogComponent 
     ] 
    }) 

    export class TestComponent implements OnInit { 
    constructor() { } 
    ngOnInit() { 
     this.callCalendar(); 
    } 
    callCalendar() { 
     this.$calendar.fullCalendar({ 
      editable: true, 
      disableResizing: true, 
      header: { 
       right: 'month, agendaWeek, agendaDay', 
       center: 'title', 
       left: 'today prev next ' 
      }, 
      eventClick: function (calEvent: any, jsEvent: any, view: any) { 
       console.log("calEvent called....", calEvent); 
       // here I want to open a popup 
      } 
     }); 
    } 
} 

それは、eventClick機能をトリガします。ここでは、ポップアップウィンドウを開きたいと思います。

私を助けてください。

Answer 1

注釈を@ViewChildだけ使用してください。この方法で、テンプレート内のコンポーネントへの参照を取得します。

export class TestComponent implements OnInit { 

    constructor() {} 

    @ViewChild(DialogComponent) // or @ViewChild('dialog') 
    private _dialogRef: DialogComponent; 

    ngOnInit() { 
     this._dialogRef.show(); 
    } 
}