从组件触发对话框show()事件

时间:2016-10-21 11:47:54

标签: angular

我正在尝试从UI触发事件时打开对话框。我尝试使用按钮点击html它正在工作,但我不知道如何从Component打开它。

HTML

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

组件

VARIANT_BOOL

当我点击用户界面时,它会触发 eventClick 功能。所以,在这里我想打开一个弹出窗口。

帮帮我。

1 个答案:

答案 0 :(得分:0)

只需使用@ViewChild注释即可。这样您就可以获得模板中组件的引用。

export class TestComponent implements OnInit {

    constructor() {}

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

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