Angular 2+ (8) Закусочная Материал Отображает, но не Увольняет

Question

Я вырывал свои волосы, пытаясь это исправить, и за мою жизнь не могу этого понять. У меня есть приложение с "@angular/core": "~8.2.14" и "@angular/material": "^8.2.3",, и у меня есть Снэк-бар, для вызова которого я использую глобальную службу. Кнопка «Отпуск» раньше работала просто отлично (около года go), но теперь почему-то перестала работать. Вот код, который у меня есть:

messages-закуска-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>

tification.service.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);
    }
  }
}

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;
  }
}

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.service *, на который подписан header.component, поэтому он, в свою очередь, создает снэк-бар с .openFromComponent

и что все работает правильно, закусочная отображается правильно.

Затем кнопка отклонения на notification-snack-bar.component не закрывает закусочную.

Когда я ставлю перерыв укажите в браузере в файле notification-snack-bar.component.ts на строке this.snackBar._openedSnackBarRef.dismiss();, я вижу, что код приходит туда и вызывает этот метод, но он ничего не делает.

Во время устранения неполадок у меня также есть расширил и попробовал следовать g в 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

Answer 1

Я сделал это!

В 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; после вызова this.notificationService. displayCaughtError, потому что я все еще хотел, чтобы ошибка была зарегистрирована в консоли. Излишне говорить, что это было ошибкой и вызвало ошибку al oop, из-за которой снэк-бар не был отменен!

Я изменил его на следующее:

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

и все хорошо в снова королевство!