angular - http调用失败时如何通知转储组件？

Question

目前我有一个智能组件products.component.ts和一个转储组件products-create.component.ts。当用户提交创建按钮时，转储组件向智能组件发出事件。

products.component.ts调用以将http产品保存在服务器中。现在我需要知道的是，如何通知转储组件服务调用成功或失败？转储组件应在失败时显示错误，并在成功时导航到列表组件。

Answer 1

好吧，您可以使用 RXJSSubejct或多BehaviorSubject播数据。
Example

更好的方法是使用运算符为多个观察者共享一个http请求shareReplay并采取相应的行动。
你必须知道http返回一个冷的 observable 的事实，当一个冷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

您可以在 OnChanges 接口的 ngOnChanges 方法中执行此操作：

基本上，您需要将一个属性从父组件传递给子组件，名为“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>
...