Как уведомить компонент дампа при сбое http-вызова?

Question

В настоящее время у меня есть умный компонент products.component.ts и один компонент дампа products-create.component.ts, Компонент дампа отправляет событие интеллектуальному компоненту, когда пользователь отправляет кнопку "Создать".

products.component.ts делает http позвоните, чтобы сохранить продукт на сервере. Теперь мне нужно знать, как уведомить компонент дампа о том, что вызов службы выполнен успешно или не выполнен? Компонент dump должен показывать ошибку при сбое и переходить к списку компонентов при успехе.

Answer 1

Ну, вы могли бы использовать RXJS'S Subejct или же BehaviorSubject многоадресная передача данных.
Example

Лучше всего поделится одним http запрос нескольких наблюдателей с использованием shareReplay оператор и принять меры соответственно.
Вы должны осознавать тот факт, что http возвращает наблюдаемую простуду и когда простуду observable имеет несколько subscribers весь поток данных переизлучается для каждого subscriber, Каждый подписчик становится независимым и получает свой собственный поток данных.

Избежать дублирования HTTP-запросов shareReplay Оператор используется.

 import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import {Observable} from 'rxjs';
    import {shareReplay,tap}from 'rxjs/operators';
    @Injectable()
    export class ShareService {

    public response$:Observable<any>;
    constructor(private httpc:HttpClient)
    {
      this.sendRequest();
    }
    public sendRequest()
    {

     this.response$= this.httpc.get('url').
        pipe(tap(res=>{console.log('called');return res;}),shareReplay(1))

    }
    fetchData()
    {

    return this.response$;
    }
    }

products.component.ts:

     constructor(service:ShareService)
      {

         service.fetchData().subscribe(result=>{
         console.log(result);

        })

продукты-create.component.ts:

     constructor(service:ShareService)
      {

         service.fetchData().subscribe(result=>{

         console.log(result);this.route.navigate(['listcomp'])

        }
        error=>{your logic}
         )

Further Reading

Answer 2

Вы можете сделать это внутри метода ngOnChanges из интерфейса OnChanges:

По сути, вам нужно передать свойство из родительского компонента в дочерний компонент с именем responseState. Если это свойство изменилось по сравнению с родительским компонентом, запускается метод ngOnChanges, то вы проверяете значение свойства.

child.component.ts:

@Component({...})
export class ChildComponent implements OnChanges {
  @Input() responseState: boolean;

  // this method is triggered when the Input properties changed.
  ngOnChanges() {
     if(responseState) {
            // successful request
     }else {
           // failed request
     }
  }
}

в родительском компоненте:

@Component({...})
export class ParentComponent {
   responseState = undefined;

   doRequest() {
       /**
        * If the request is failed,
        * set 'this.responseState = false'
        * 
        * if the request is successful
        * set 'this.responseState = true'
        */
   }
}

родительский шаблон:

...
<child-component
   [responseState]='responseState'
> </child-component>
...