Angular Snackbar按钮回调未触发close方法问题排查

你的问题出在服务中定义的action函数没有接收并调用组件传递的closeHandler。

看组件的callButtonAction方法，它把() => this.close()作为参数传给了action，但你在announcements.services.ts里定义的action是一个无参函数：

action: () => {
    this.router.navigate(['/dm/statistics/insights']);
    this.dismissAnnouncement(AnnouncementName.INSIGHTS_DASHBOARD);
},

它根本没有接收这个closeHandler参数，自然不会触发close()方法。

解决方案 #

修改服务里的action函数，让它接收closeHandler参数，并在合适的时机调用它。比如在完成导航和取消公告后调用：

// announcements.services.ts
notificationConfig: {
    buttons: [
        {
            text: this.translateService.instant(_('Go to Insights dashboard')),
            action: (closeHandler) => { // 接收closeHandler参数
                this.router.navigate(['/dm/statistics/insights']);
                this.dismissAnnouncement(AnnouncementName.INSIGHTS_DASHBOARD);
                closeHandler(); // 调用closeHandler触发组件的close()
            },
        },
    ],
},

这样当点击按钮时，callButtonAction传入的closeHandler会被执行，进而触发组件的close()方法，输出console.log(2)并emit关闭事件。

内容的提问来源于stack exchange，提问作者Peter Boomsma