Angular 角度2+；（8） 小吃店展示的材料，但不会被丢弃

我一直在努力解决这个问题，但我一辈子都想不出来。我有一个带有

“@angular/core”：“~8.2.14”

和

“@angular/material”：“^8.2.3”

的应用程序，我有一个快餐店，我使用全球服务呼叫它。“解雇”按钮过去工作正常（大约一年前），但现在由于某种原因停止工作。这是我的代码：

通知快餐店.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();
  }
}

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

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

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

通知快餐店.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>

标题.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();
  }
}

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

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

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

应用程序模块.ts

提供程序：[{provide:ErrorHandler，useClass:lolpickemerorhandler}，]

目的是： *抛出一个错误 *错误处理程序拾取错误并点击

通知.service上的
显示ErrorSource.next（）
*
header.component
订阅了该组件，因此它反过来使用
创建快餐店.openfromponent

如果一切正常，快餐店就会正确显示

然后，
通知小吃店组件上的“关闭”按钮不会关闭小吃店

当我在浏览器中的
通知snackBar.component.ts
文件的
this.snackBar.行中放置断点时，我可以看到代码出现并调用该方法，但它没有做任何事情

在排除故障的同时，我还扩展并尝试了
通知快餐店组件.ts中的以下内容：

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

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

仅供参考，这是我正在处理的回购协议（我只是在角度代码中人为地抛出了一个错误）：
https://github.com/blubberbo/LolPickem
我做到了

在
lol pickem error.handler.ts
中，它只读取：

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

然后我添加了
抛出错误this.notificationService后的code>。displayCaughtError
，因为我仍然希望在控制台中记录错误。不用说，这是一个错误，并导致了一个循环，使快餐店不解散

我改为：

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

王国里一切又好了
 您的代码看起来过于复杂，好像使用了snackbar（_openedsnakbarref）的内部结构。我将检查文档并重新开始：。另外，看起来是注入的，但却是在构造函数中创建的服务引用怎么了？它感觉也太复杂了！我会从头开始，谢谢你。很抱歉，您在谈论哪个服务引用？很高兴您能解决这个问题（不过我还是会尽量降低复杂性：）。我指的服务引用是
private notificationService:notificationService=new notificationService（）
-通常您会将其标记为
@Injectable
，并让angular使用依赖项注入为您创建它。好的，谢谢您-我会研究一下