Question

我正在尝试通过角度6的通知服务中的文本消息来查看组件中弹出的错误。遇到错误时，我会致电通知服务。

首先是通知服务：

private _notification: BehaviorSubject<string> = new BehaviorSubject(null);
private notification$: Observable<string> = this._notification.asObservable().pipe(
  publish(),
  refCount()
);

constructor() { }

notify(message: string) {
  this._notification.next(message);
  setTimeout(() => this._notification.next(null), 3000);
}

错误处理程序服务

export class GlobalErrorHandlerService implements ErrorHandler {

  constructor(private injector: Injector) { }

  handleError(error: any) {
    const router = this.injector.get(Router);
    console.log('URL: ' + router.url);

    const loggerService = this.injector.get(LoggerService);
    loggerService.log(error);

    const notificationService = this.injector.get(NotificationService);

    if (error instanceof HttpErrorResponse) {
      // BackEnd returns unsuccessful response codes(404,...)
      console.error('Status Code: ', error.status);
      console.error('Response body:', error.message);
      console.error('Error Message: ', error.error);

      notificationService.notify(`${error.status} - ${error.error}`);
    } else {
      // client side or network error occurred.
      console.error('Error occurred: ', error.message);
      notificationService.notify(`${error.status} - ${error.message}`);
    }
  }
}

所以我的问题是，当向我的通知服务发射新的错误消息时，如何显示弹出窗口。我知道如何从通知服务中订阅可观察对象，但是我不知道如何通过查看弹出窗口将其组合到组件中。

一个简单的代码示例或有用的链接会很不错：）

非常感谢

编辑：为了在此阐明我的问题，请参见示例使用场景：

ComponentA将POST请求发送到后端。如果失败，错误处理程序服务将捕获错误并将错误消息发送到我的通知服务。现在应该有一个弹出消息，显示来自notification $的错误消息。
因此，我知道如何订阅notification $，但是我不知道如何显示来自notification $的消息的弹出窗口。我应该为此或其他组件或其他内容使用服务吗？？

Answer 1

简单的方法是，您可以将通知组件置于应用程序的根目录，并在应用程序模块上提供通知服务。通知服务可以远程控制通知和消息的可见性。

<html>
<app>
<notification message="notificationService.message" *ngIf="notficationService.active"> </notification>
</app>
<html>

或者，您可以选择采用动态组件方法 https://itnext.io/angular-create-your-own-modal-boxes-20bb663084a1

使用Angular 6中的行为主题的通知服务的弹出窗口

1 个答案: