强制订阅者从服务中请求数据？

Question

我有一个简单的结构，具有多个组件和一个服务[StackBlitz]：

服务

@Injectable()
export class Service {
  constructor(private http: HttpClient) {}

  post(entity: IEntity): Observable<IEntity> {
    return this.http
               .post<IEntity>('/api/entity', entity)
               .pipe(map(parseDates));
  }

  get(): Observable<IEntity[]> {
    return this.http
               .get<IEntity[]>('/api/entity')
               .pipe(map(parseDates));
  }
}

Component0

@Component({
  selector: 'app-component0',
  template: `<app-component1></app-component1>
             <app-component2></app-component2>`,
  styleUrls: []
})
export class Component0 {}

Component1

@Component({
  selector: 'app-component1-create',
  template: `<button (click)="submit()">Submit</button>`,
  styleUrls: []
})
export class Component1 {    
    constructor(private service: Service) { }

    submit() {
        this.service.post({foo: 'bar'})
                    .subscribe(console.info, console.error)
    }
}

Component2

@Component({
  selector: 'app-component2-table',
  template: `<pre>{{ entities | json }}</pre>`,
  styleUrls: []
})
export class Component2 implements OnInit {
    entities: IEntity[];

    constructor(private service: Service) { }

    ngOnInit() {
        this.service.get()
                    .subscribe(entities => this.entities = entities,
                               console.error)
    }
}

---

如何通过Component1获取Component2以更新Service？

Answer 1

您应该有另一个可观察的对象，以减轻组件之间的通信：

@Injectable()
export class StoreService {

  private _employes$ = new BehaviorSubject<{id:number,employee_name:string,employee_salary:number,employee_age:number}[]>([]);

  constructor(private _http: HttpClient) {
    this.refresh();
  }

  refresh() {
    this._http.get<{id:number,employee_name:string,employee_salary:number,employee_age:number}[]>('https://dummy.restapiexample.com/api/v1/employees').subscribe(
      data => this._employes$.next(data)
    );
  }

  post() {
      const payload = {"name":"test","salary":"123","age":"23"};

      this._http.post('https://dummy.restapiexample.com/api/v1/create', payload).subscribe(() => {
        this.refresh();
      })
  }

  get employes$(): Observable<{id:number,employee_name:string,employee_salary:number,employee_age:number}[]> {
    return this._employes$.asObservable();
  }
}

由两个部分组成：

您的商店可观察到的用途，当您要更新流时，可以在其旁边。

private _employes$ = new BehaviorSubject<{...}[]>([]);

暴露的吸气剂。需要通过商店中的任何更改通知的任何组件都可以订阅。

  get employes$(): Observable<{...}[]> {
    return this._employes$.asObservable();
  }

---

从现在开始，所有内容都与您的实际情况有关，您可以通过多种方式来更新此内部可观察的内容：

最快的方法：

refresh() {
    this._http.get<{...}[]>('...').subscribe(
      data => this._employes$.next(data)
    );
  }

在您的服务内部，您订阅了http呼叫并更新了内部可观察的内容。

Pro：

• 您不公开请求。
• 非常易于维护，因为只有一个地方可以进行API调用。

Con：

• 不适用于您要实际控制，更新……对API答案进行特定操作的情况。
• 订阅服务并不总是一个好主意。