Angular - 捕获组件中的错误

Question

我正在使用 Angular (5) 制作应用程序，但我对 Subject 的练习并不多。 我想在我的组件中捕获 Observable 错误，但我做不到。 这是我的代码

我的模型： example-model.ts

export class ExampleModel { 
    public value: string; 
}

我的服务： 示例模型服务

@Injectable()
export class ExampleModelService implements OnDestroy{

  destroy$: Subject<boolean> = new Subject<boolean>();
  private exampleModel$ = new ReplaySubject<ExampleModel>(1);

  constructor() { }

  exampleModelInit(){
    //Observable.from([{'value': 'Hello World'}])
    Observable.create(sub => sub.error('Observable Error'))
      .pipe(
        distinctUntilChanged(),
        takeUntil(this.destroy$)
      )
      .subscribe((exampleModel: ExampleModel) => {
        this.sendExampleModel(exampleModel);
      },
        err => this._handleError(err));
  }

  private _handleError(err: any) {
    return Observable.throw(err);
  }

  private sendExampleModel(exampleModel: ExampleModel) {
    this.exampleModel$.next(exampleModel);
  }

  public whenExampleModel(): Observable<ExampleModel> {
    this.exampleModelInit();
    return this.exampleModel$.asObservable();
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
  }
}

我的组件： home-component.ts

export class HomeComponent implements OnInit, OnDestroy {

  public exampleModel$: Observable<ExampleModel>;

  public unsubscribe$: Subject<boolean> = new Subject<boolean>();

  controls: boolean = false;
  indicators: boolean = false;

  constructor(private exampleModelService$: ExampleModelService) {
  }

  ngOnInit() {
  }

  getExampleModel() {
    this.exampleModel$ = this.exampleModelService$.whenExampleModel();

  }

  ngOnDestroy(): void {
    this.unsubscribe$.next(true);
    this.unsubscribe$.unsubscribe();
  }

}

我想在getExampleModel() 中发现我的错误，我尝试使用.catch 没有结果。

谢谢

Answer 1

第一个问题是您将异步方法用作在执行时返回值的普通方法。

然后，我们需要做的第一个更改是在 this.exampleModelService$.whenExampleModel(); 中移动捕获错误的逻辑。方法。

whenExampleModel() 方法必须返回一个 observable 给消费者以获得异步结果。 异步结果是将来会出现但不可用的结果

尝试改变这一点

    @Injectable()
export class ExampleModelService implements OnDestroy{

  destroy$: Subject<boolean> = new Subject<boolean>();
  private exampleModel$ = new ReplaySubject<ExampleModel>(1);
  private obs : Observable<ExampleModel>;

  constructor() { }

  exampleModelInit(){
    //Observable.from([{'value': 'Hello World'}])
    this.obs = Observable.create(sub => sub.error('Observable Error'))
      .pipe(
        distinctUntilChanged(),
        takeUntil(this.destroy$)
      );
  }

  private _handleError(err: any) {
    return Observable.throw(err);
  }

  private sendExampleModel(exampleModel: ExampleModel) {
    this.exampleModel$.next(exampleModel);
  }

  public whenExampleModel(): Observable<ExampleModel> {
    this.exampleModelInit();
    return this.obs;
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
  }
}

组件

whenExampleModel.subscribe(s=>{},e=>{});

Answer 2

尝试返回一个 return this.exampleModel$;而不是返回 this.exampleModel$.asObservable();在 whenExampleModel 服务方法中。

无论如何，我想知道你想要做什么。可以在这里写吗？

试试这个！

exampleModelInit(){
//Observable.from([{'value': 'Hello World'}])
Observable.create(sub => sub.error('Observable Error'))
  .pipe(
    distinctUntilChanged(),
    takeUntil(this.destroy$)
  )
  .subscribe((exampleModel: ExampleModel) => {
    this.sendExampleModel(exampleModel);
  },
    err => this.sendExampleModel(exampleModel);

}