Question

我正在尝试为我的Angular应用编写拦截器，该拦截器在发生错误时显示Bootstrap警报。这是我到目前为止所做的：

export class HttpErrorInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        retry(1),
        catchError((error: HttpErrorResponse) => {
          let errorMessage = '';
          if (error.error instanceof ErrorEvent) {
            // client-side error
            errorMessage = `Error: ${error.error.message}`;
          } else {
            // server-side error
            errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
          }
          // this works: window.alert(errorMessage);
          // the following DOM manipulation doesn't work
          const p = document.createElement('p');
          p.innerHTML = 'hello';
          document.appendChild(p);
          return throwError(errorMessage);
        })
      );
  }
}

我尝试加载dom，但它向我显示：null的createFragment错误。如何在正文末尾添加Bootstrap警报元素？这是我要添加的元素：

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  My error message goes here.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

在Angular拦截器中操作DOM以显示警报

0 个答案: