时间戳

首页 > 解决方案 > Angular 2+ (8) Material Snack Bar 显示但不关闭

angular - Angular 2+ (8) Material Snack Bar 显示但不关闭

问题描述

我一直在努力解决这个问题，但我一生都无法弄清楚。我有一个应用程序，"@angular/core": "~8.2.14"并且"@angular/material": "^8.2.3",我有一个小吃店，我使用全球服务来调用它。关闭按钮过去工作得很好（大约一年前），但现在由于某种原因已经停止工作。这是我的代码：

通知小吃bar.component.ts

export class NotificationSnackBarComponent {
  constructor(
    @Inject(MAT_SNACK_BAR_DATA) public data: any,
    public snackBar: MatSnackBar,
    private notificationService: NotificationService = new NotificationService(),
  ) {
    // message logic here - removed for brevity
  }
  // set the default values
  message = 'Unknown error...';
  action = 'dismiss';

  // close the snack bar
  dismiss(): void {
    // indicate on the service that the error is being closed
    this.notificationService.errorBeingDisplayed = false;
    // dismiss the actual snack bar
    this.snackBar._openedSnackBarRef.dismiss();
  }
}

通知小吃bar.component.html

<div class="notification-snack-bar-container flex">
  <div>
    <span class="mat-warn-color"
      >An Error Occurred: {{ message }}<br /><span *ngIf="timerCount > 0"
        >Timer: {{ timerCount }}</span
      ></span
    ><br /><span>See the console for the full error.</span>
  </div>
  <button mat-button color="accent" (click)="dismiss()">{{ action }}</button>
</div>

通知服务.ts

export class NotificationService {
  constructor() {}
  // a local flag to keep track of whether or not an error is being shown
  public errorBeingDisplayed = false;
  // the subject to display the error
  private displayErrorSource = new Subject<string>();
  // the observable used to display the error
  public displayError$ = this.displayErrorSource.asObservable();

  /**
   * display any error message that is caught on the page
   *  @params error: string
   */
  //
  displayCaughtError(error: string) {
    // only if there is no error being displayed currently
    if (!this.errorBeingDisplayed) {
      console.log(error);

      // indicate an error is being displayed
      this.errorBeingDisplayed = true;
      // call the .next() method on the source to push the next error to the snack bar
      this.displayErrorSource.next(error);
    }
  }
}

大声笑-pickem-error.handler.ts

export class LolPickemErrorHandler implements ErrorHandler {
  constructor(
    private notificationService: NotificationService = new NotificationService(),
  ) {}
  handleError(error) {
    this.notificationService.displayCaughtError(error.message);
    throw error;
  }
}

header.component.ts

export class HeaderComponent implements OnInit {
  constructor(
    private snackBar: MatSnackBar,
    private notificationService: NotificationService,
    public auth: AuthService,
    private zone: NgZone,
  ) {}

  ngOnInit() {
    this.notificationService.displayError$.subscribe((error) => {
      // Load the given component into the snack-bar.
      this.zone.run(() => {
        this.snackBar.openFromComponent(NotificationSnackBarComponent, {
          data: {
            message: error,
          },
        });
      });
    });
  }
}

app.module.ts providers: [{ provide: ErrorHandler, useClass: LolPickemErrorHandler },]

目的是： * 抛出错误 * 错误处理程序拾取错误并点击 *订阅displayErrorSource.next()该错误，因此它反过来创建小吃店notification.serviceheader.component.openFromComponent

并且一切正常，小吃店正确显示。

然后，上的关闭按钮notification-snack-bar.component不会关闭小吃店。

notification-snack-bar.component.ts当我在浏览器中的文件中放置一个断点时this.snackBar._openedSnackBarRef.dismiss();，我可以看到代码到了那里并调用了该方法，但它没有做任何事情。

在进行故障排除时，我还扩展并尝试了以下内容notification-snack-bar-component.ts：

   this.snackBar._openedSnackBarRef.dismiss();
   this.snackBar.dismiss();
   this.snackBarRef.instance.snackBarRef.dismiss();
   this.snackBarRef.dismiss();

任何帮助将不胜感激，这让我发疯！

仅供参考，这是我正在使用的存储库（我只是在 Angular 代码中人为地抛出了一个错误）：https://github.com/blubberbo/LolPickem

标签： angulartypescriptangular-material

解决方案

我做的！

在 中lol-pickem-error.handler.ts，它过去只是读作：

export class LolPickemErrorHandler implements ErrorHandler {
  constructor(
    private notificationService: NotificationService = new NotificationService(),
  ) {}
  handleError(error) {
    this.notificationService.displayCaughtError(error.message);
  }
}

然后我添加了throw error;after call this.notificationService. displayCaughtError，因为我仍然希望将错误记录在控制台中。不用说，这是一个错误，导致了一个循环，使小吃店无法解雇！

我将其更改为：

 handleError(error) {
    this.notificationService.displayCaughtError(error.message);
    console.error(error);
  }

王国再次一切安好！

推荐阅读