如何在Typescript(Angular Material)中实现回调函数?

时间:2018-10-29 11:59:25

标签: angular angular-material

我正在使用 Angular Material Dialog 组件,我想传递一个可选的回调函数,并在用户单击OK button时执行。我可以知道如何实施吗?

askUser(customData: any) {
    openDialog() {
        const dialogRef = this.dialog.open(AskDialog, {
            data: customData
        });

        dialogRef.afterClosed().subscribe(isOK=> {
            if (isOK && customData.hasOwnProperty('callback')) {
                // ??? how to execute the "customData.callback"
            }
        });
    }
}

我希望我可以像这样使用askUser()

function freeGift(gift: string) { /* ... */ }
function contactPolice(phone: number, email: string) { /* ... */ }

askUser({ // callback
    displayText: 'Are you a superman?',
    callback: freeGift('blue shirt')
});

askUser({ // different callback with different arguments
    displayText: 'Are you a criminal?',
    callback: contactPolice(this.phone, 'police@gmail.com')
});

askUser({ // no callback
    displayText: 'Do not disturb!'
});

如何通过回调到customData.callback中,以及如何调用并执行该功能?

换句话说,如何将 function 传递给“变量”,然后在适当的上下文中执行“变量”?

有可能吗?

2 个答案:

答案 0 :(得分:2)

您可以执行以下操作:

askUser({ // callback
    displayText: 'Are you a superman?',
    callback: () => freeGift('blue shirt')
});

,您会这样称呼它:

customData.callback();

答案 1 :(得分:1)

这很容易实现,您只需使用()即可执行功能。制作了一个示例应用程序进行详细说明; https://stackblitz.com/edit/angular-8drwks