Angular/RxJS 多次订阅 http 服务 observable答案

【问题标题】：Angular/RxJS multiple subscriptions to http service observableAngular/RxJS 多次订阅 http 服务 observable
【发布时间】：2018-01-17 18:06:27
【问题描述】：

我正在尝试让多个角度组件订阅单个 http 服务。他的事件流程是：用户单击 test-data.component.html 中的按钮 > test-data.service 发出 POST 请求 > test-data.component 中的订阅接收数据并且 parent.component.ts 接收数据。问题是 parent.component.ts 永远不会从 POST 收到新数据。我是否需要通知 parent.component 服务提供者发生了变化？以下是应用程序的相关部分：

parent.component.html

<div>  
 <app-test-data></app-test-data>
</div>

parent.component.ts

@Component({
 selector: 'app-short-form',
 templateUrl: './short-form.component.html',
 styleUrls: ['./short-form.scss'],
 providers:[ShortFormService, TestDataService]
})

constructor(
 private testDataService: TestDataService,
) { }

ngOnInit() {   
 this.testDataService.getTestData()
  .subscribe(
    (event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Response:
          console.log('???? Done!', event.body);
      }
    },
    (err: HttpErrorResponse) => {
      if (err.error instanceof Error) {
        console.log("Client-side error occured.");
      } else {
        console.log("Server-side error occured.");
      }
    }
  )

}

test-data.component.html

<button m(click)="getTestData($event)" >Populate w/ match</button>

test-data.component.ts

@Component({
  selector: 'app-test-data',
  templateUrl: './test-data.component.html',
  styleUrls: ['./test-data.component.scss'],
  providers: [TestDataService]

})
constructor(
 private testDataService: TestDataService,
) { }

getTestData(event){
 event.preventDefault();
 this.testDataService.getTestData()
 .subscribe(     
  (event: HttpEvent<any>) => {
    switch (event.type) {
      case HttpEventType.Response:
        console.log('???? Done!', event.body);          
    }
  },
  (err: HttpErrorResponse) => {
    if (err.error instanceof Error) {
      console.log("Client-side error occured.");
    } else {`enter code here`
      console.log("Server-side error occured.");
    }
  }
)
}

test-data.service.ts

constructor(
 private http:HttpClient
) { }

getTestData(): Observable<HttpEvent<any>> {
  const req = new HttpRequest('POST', this.testDataUrl, {
    reportProgress: true,
  });
var result = this.http.request(req).share();
return result

【问题讨论】：

您需要在该服务中有一个变量，例如 behavioursubject 或 replaysubject，它将通知父组件。这是您使用共享服务避免事件意大利面或使用 ngrx 的经典案例。 ngrx link 共享服务link

标签： angular rxjs

【解决方案1】：

您应该使用 Subject 或 BehaviourSubject 并让您的组件订阅它。您可以在此链接中找到有关这些主题的更多信息： http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject

【讨论】：

链接中的优秀资源！我根据给出的例子让它工作。将消息传递服务分开的目的是什么？可重用性？我最初的方法是尝试将 messinging.service 功能烘焙到我的 test-data.service
谢谢，在 Angular 中使用服务的目的是关注点分离和可重用性。您无需在代码中应用消息服务，只需了解 Subject 在您的 test-data.service 中的工作方式和实现方式即可。