如何在空闲订阅中关闭 Angular Snackbar(Ref)？答案

【问题标题】：How can I dismiss an Angular Snackbar(Ref) in an idle subscribe?如何在空闲订阅中关闭 Angular Snackbar(Ref)？
【发布时间】：2021-02-16 23:12:29
【问题描述】：

我已经在我的应用程序中实现了 ng-idle。当用户处于空闲状态时，将显示一个带有倒计时的 Angular Material Snackbar（这已经在工作）。当用户移动他的鼠标（或点击或任何其他交互）时，它需要关闭打开的快餐栏。

类/服务（除自定义 Snackbar 之外的所有代码所在的位置）：

openSnackbar = null;
constructor(private idle: Idle, private snackbar: MatSnackBar){}

最后 5 秒时的代码将开始执行操作：

this.idle.onTimeoutWarning.subscribe((countdown) => {
    this.openSnackbar = this.snackbar.openFromComponent(CountdownSnackbarComponent, {
       duration: 5000
    });
});

Snackbar 组件：

@Component({
  selector: 'countdown-snackbar',
  template: `{{ secondsLeft }} seconds left to do an action!`,
})
    export class CountdownSnackbarComponent {
          secondsLeft = '5';
        
          constructor() {}
    }

当用户在最后 5 秒已经开始时执行操作时的代码：

this.idle.onIdleEnd.subscribe(() => {
  this.idleState = 'No longer idle.';
  this.openSnackbar.dismiss();
}

因此，如果用户执行操作（例如单击），则需要关闭 Snackbar。然而，使用上面的代码，Snackbar 不会被关闭，但它会使snackbar 保持打开的时间甚至比添加到snackbar 配置中的持续时间更长。

如何关闭（onIdleEnd）订阅功能中的snackbar？

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

您可以尝试直接从服务中引用的关闭方法

this.idle.onIdleEnd.subscribe(() => {
  this.idleState = 'No longer idle.';
  this.snackbar.dismiss();
}

【讨论】：