Design patterns 在维护功能完成时通知组件

我正在编写一个向后端执行http查询的服务：

getPlacesForUser(){
 this.http.get("http://localhost:8080/processPlaces")
  .map(res => res.text())
  .subscribe(
    data => this.result = data,
    err => this.logError(err),
    () => console.log('Places Request completed')
  )
}

现在，如果请求完成，我想更新组件端：

processPlaces(){
 this._backendService.getPlacesForUser();
}

如何在组件和服务之间进行通信

---

此外，我正在寻找最佳实践

实际上，您可以直接从

getplacesfourser

方法返回observable，并在其上附加subscribe方法

• 服务

  getPlacesForUser(){
    return this.http.get("http://localhost:8080/processPlaces")
      .map(res => res.text());
  }
  

• 组件

  processPlaces(){
   this._backendService.getPlacesForUser()
    .subscribe(
      data => this.result = data,
      err => this.logError(err),
      () => console.log('Places Request completed')
    );
  }
  

   constructor(private _service: Service)
   ngOnInit(): any {
     this._service.result$.map(result => result.filter(res => 
      res.id)).subscribe(
          result => this.result = result); // map is optional to filter json
    }
  

result

属性对应于可以在组件中使用的组件的属性

您可以注意到，

async

管道可以直接利用表达式中的observable（例如在

ngFor

one中）

我认为这个答案可以帮助你：

希望它能帮助你，

---

Thierry

事实上，您可以直接从

getplacesfourser

方法返回observable，并在其上附加subscribe方法

• 服务

  getPlacesForUser(){
    return this.http.get("http://localhost:8080/processPlaces")
      .map(res => res.text());
  }
  

• 组件

  processPlaces(){
   this._backendService.getPlacesForUser()
    .subscribe(
      data => this.result = data,
      err => this.logError(err),
      () => console.log('Places Request completed')
    );
  }
  

   constructor(private _service: Service)
   ngOnInit(): any {
     this._service.result$.map(result => result.filter(res => 
      res.id)).subscribe(
          result => this.result = result); // map is optional to filter json
    }
  

result

属性对应于可以在组件中使用的组件的属性

您可以注意到，

async

管道可以直接利用表达式中的observable（例如在

ngFor

one中）

我认为这个答案可以帮助你：

希望它能帮助你，

---

Thierry

有另一种方法可以使用Rxjs框架调用每个组件的数据，确保服务对所有组件都是可重用的，所以尽可能多地在服务中编写代码，只在组件中订阅：

服务

 import { Injectable } from 'angular2/core';    
 import { Http } from 'angular2/http';
 import { Result} from './models/result'; // model imported
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';

 @Injectable()
 export class Service {
   private _result: Result[];

   constructor(private http: Http) {
     this.result$ = new BehaviorSubject<Result[]>(this._result)
   }
   result$: BehaviorSubject<Result[]>;
   private _urlGet = '/api';

   getPlacesForUser(): void{
     this.http.get(this._urlGet)
      .map(res => JSON.parse(res.text()))
      .catch(error => console.log(error))
      .subscribe(result => {
         this.result = result;
       })
    }
 }

---

还有另一种方法可以使用Rxjs框架调用每个组件的数据，确保服务对所有组件都是可重用的，所以尽可能多地在服务中编写代码，并只在组件中订阅：

服务

 import { Injectable } from 'angular2/core';    
 import { Http } from 'angular2/http';
 import { Result} from './models/result'; // model imported
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';

 @Injectable()
 export class Service {
   private _result: Result[];

   constructor(private http: Http) {
     this.result$ = new BehaviorSubject<Result[]>(this._result)
   }
   result$: BehaviorSubject<Result[]>;
   private _urlGet = '/api';

   getPlacesForUser(): void{
     this.http.get(this._urlGet)
      .map(res => JSON.parse(res.text()))
      .catch(error => console.log(error))
      .subscribe(result => {
         this.result = result;
       })
    }
 }

---

我必须在服务中的this.result=result之后添加以下行：this.result$.next（this.result），以便组件能够提取它。运行Angular 8时，我必须在服务中的this.result=result之后添加以下行：this.result$.next（this.result），以便组件拾取它。跑动角度8。