Angular/RxJS多订阅http服务可观察

问题描述：

我想要有多个角组件订阅单个http服务。他的事件流程是：用户单击test-data.component.html> test-data.service中的按钮，使POST请求>订阅test-data.component接收数据，parent.component.ts接收数据。问题是parent.component.ts从不接收来自POST的新数据。我是否需要通知parent.component服务提供商发生的变化？下面是该应用程序的相关部分：Angular/RxJS多订阅http服务可观察

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."); 
     } 
    } 
)

}

测试data.component.html

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

测试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."); 
    } 
    } 
) 
}

测试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

你需要有该服务的varaible像'behavioursubject'或'replaysubject'将通知父组件。这是您使用共享服务避免事件面条或使用ngrx的经典案例。 ngrx [链接]（https://rahulrsingh09.github.io/AngularConcepts/ngrx）共享服务[链接]（https://rahulrsingh09.github.io/AngularConcepts/faq） –

答

您应该使用主题或BehaviourSubject，使您的compometes订阅。你可以找到更多有关这些话题在这个环节： http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject

优秀的资源在您的链接！基于给出的例子，我得到了它的工作。将messaging.service分开的目的是什么？可重用性？我最初的方法是试图将messaging.service功能烘焙到我的test-data.service中 – Anthony

谢谢，角度使用服务的目的是分离关注点和可重用性。您不需要在代码中应用消息服务，只需了解Subject在Test-data.service中的工作方式和实现方式即可。 – Nour

Angular/RxJS多订阅http服务可观察

相关推荐