Angular

Question

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

我的模型： 示例-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();
  }
}

我的组件： 首页-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

尝试return一个returnthis.exampleModel$；而不是 return 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);

}

Answer 2

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

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

whenExampleModel() 方法必须 return 对消费者来说是可观察的，以便可以获得异步结果。 异步结果是将来会出现但不可用的结果

尝试改变这个

    @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=>{});

Angular - 捕获组件中的错误

Angular - Catch error in component

observable

rxjs5

angular5