当 http 调用失败时如何通知转储组件?

Question

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

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

Answer 1

你可以使用RXJS的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$;
}
}

product.component.ts：

constructor(service:ShareService)
{
service.fetchData().subscribe(result=>{
console.log(result);
})

products-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>
...