Angular2自定义ErrorHandlerComponent组件不显示问题求助

Let's work through your issue and get that error component showing properly:

Root Cause Breakdown #

From what you've shared, the component does receive the error value (per your logs) but fails to render it when the error is set in the http.post catch block. The biggest red flag here is the incorrect usage of the RxJS catch operator—this breaks the observable stream and can throw off Angular's change detection cycle, even if the input value makes it to the component.

Step-by-Step Fixes #

1. Fix the RxJS catch Operator #

The catch operator requires you to return an observable to keep the stream intact. Your current code doesn't return anything, which causes unexpected behavior. Update your app.component.ts code like this:

// Make sure you import the necessary RxJS operators first
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

// ...

this.http.post(this.urlEnvironment.getUser(), objectToSend)
  .catch((error: any) => {
    this.error = "ERROR";
    // Return an observable to maintain the stream (rethrow or return a default)
    return Observable.throw(error);
    // Or if you want to suppress the error: return Observable.of(null);
  })
  .subscribe((data: Response) => { 
    // Your success logic here
  });

2. Force Change Detection (If Needed) #

If the first fix doesn't resolve the issue, the change detection cycle might not be picking up the error update. Inject ChangeDetectorRef into your component and manually trigger detection after setting the error:

import { ChangeDetectorRef } from '@angular/core';

// ...

constructor(private cd: ChangeDetectorRef) {}

// ...

this.http.post(this.urlEnvironment.getUser(), objectToSend)
  .catch((error: any) => {
    this.error = "ERROR";
    // Manually trigger change detection to update the view
    this.cd.detectChanges();
    return Observable.throw(error);
  })
  .subscribe((data: Response) => { 
    // Your success logic here
  });

3. Confirm Input Binding Scope #

Double-check that the error variable you're setting in app.component.ts is the same variable bound to your <error-handler> component. If the component lives in login.html but you're updating this.error in app.component.ts, those are two separate variables—you'll need a shared service to pass the error between components, or adjust your binding to target the correct property.

4. Rule Out Styling/DOM Issues #

Even though the component works in the login flow, inspect the element in DevTools when the error is set from app.component.ts. Confirm the smallWidth class isn't hiding the element (e.g., display: none or visibility: hidden) in this specific context.

Quick Note for RxJS 6+ #

If you're using a newer RxJS version, the syntax uses pipe and catchError instead:

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

// ...

this.http.post(this.urlEnvironment.getUser(), objectToSend)
  .pipe(
    catchError((error: any) => {
      this.error = "ERROR";
      this.cd.detectChanges();
      return throwError(error);
    })
  )
  .subscribe((data: Response) => { 
    // Your success logic here
  });

内容的提问来源于stack exchange，提问作者Noman