Угловой - ошибка улова в компоненте - PullRequest
0 голосов
/ 12 мая 2018

Я делаю приложение на Angular (5), и я не очень хорошо практикуюсь с Subject. Я хочу поймать наблюдаемую ошибку в моем компоненте, но я не могу сделать. Это мой код

Моя модель: пример-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 безрезультатно.

Спасибо

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Первая проблема заключается в том, что вы используете асинхронный метод в качестве обычного метода, который возвращает значение при выполнении.

Затем первое изменение, которое нам нужно сделать, это переместить логику для ошибки перехвата в this.exampleModelService$ .whenExampleModel ();method.

Метод whenExampleModel () должен возвращать наблюдаемое потребителю для получения асинхронного результата. Асинхронный результат - это результат, который придет в будущем, но недоступен

Попробуйте изменить это

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

0 голосов
/ 12 мая 2018

Попробуйте вернуть 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);

}

...