为在 Angular 中显示网络状态而关闭后再次显示 snackbar

Question

我正在使用 snackbar 离线显示网络状态：

showSnackbar(message: string, duration?: number, dismissTitle?: string): void {
    this.snackBarRef = this.snackBar.open(message, dismissTitle, {
      duration: duration
    });
}

hideSnackbar(): void {
    this.snackBarRef.dismiss();
}

handleNetwork() {
    fromEvent(window, 'offline').subscribe(event => {
        this.showSnackbar('No Internet', null, 'Dismiss');
        //After Dismiss Snack-bar
        this.snackBarRef.afterDismissed().subscribe(() => {
            this.handleNetwork();
        });
    });

    fromEvent(window, 'online').subscribe(event => {
      this.hideSnackbar();
    });
}

在每次关闭 snackbar 时，我想再次显示 snackbar，直到网络状态变为在线。我在 snackbar 关闭后再次调用 handleNetwork() 但它不起作用。如果有人知道该怎么做，请告诉我。谢谢

Answer 1

可以这样做：

isOffline = false;

showSnackbar(message: string, duration?: number, dismissTitle?: string): void {
   this.snackBarRef = this.snackBar.open(message, dismissTitle, {
     duration: duration
  });
}

hideSnackbar(): void {
  this.snackBarRef.dismiss();
}

handleNetwork() {
 fromEvent(window, 'offline').subscribe(event => {
    this.isOffline = true;
    this.showStatus();
 });
 fromEvent(window, 'online').subscribe(event => {
    this.isOffline = false;
    this.hideSnackbar();
 });
}

showStatus() {
  this.showSnackbar('No Internet', null, 'Reconnect');
  this.snackBarRef.afterDismissed().subscribe(() => {
    if (this.isOffline === true) {
      this.showStatus();
    }
  });
 }

为在 Angular 中显示网络状态而关闭后再次显示 snackbar

Showing snackbar again after dismissing it for displaying network status in Angular

rxjs

angular