如何在Angular 2中“链接”两个独立的可观察对象

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在用Angular2开发一个Web应用程序，并且从服务器获取数据时遇到了一些问题。如何在Angular 2中“链接”两个独立的可观察对象

import ... 
@Component({ 
... 
}) 
export class EmployeeManagementTableComponent implements OnInit, OnDestroy{ 
private employees: Employee[]; 
private departments: SelectItem[] = []; 
private selectedDepartment: string; 
private columns: any[]; 
private paramSub: any; 
private employeesSub: any; 
private departmentSub: any; 
constructor(private employeeManagementService: EmployeeManagementService, 
      private route: ActivatedRoute, 
      private router: Router, 
      private ccs: ComponentCommunicatorService, 
      private logger: Logger) { } 
ngOnInit(){ 
    this.columns = [ 
    ... 
    ]; 
    //ccs is just a service for storing/getting app wide infomation 
    this.selectedDepartment = this.ccs.getSelectedDepartment(); 
    this.getDepartments(); 
    this.getEmployees(this.selectedDepartment); 
    ... 
} 
ngOnDestroy(){ 
    /*this.employeesSub.unsubscribe(); 
    this.departmentDub.unsubscribe();*/ 
} 
getDepartments(){ 
    this.departments.push({label: 'Alle', value: 'all'}); 
    this.departmentSub = this.employeeManagementService.getDepartments().subscribe(
      data => {data.forEach((item, index) => { 
         this.departments.push({label: item, value: index.toString()}); 
        });  
        }, 
      err => this.logger.error(err), 
     () => {this.logger.log('done loading'); 
       this.departmentSub.unsubscribe()} 
    ); 
} 
getEmployees(department: any){ 
this.employeesSub = this.employeeManagementService.getEmployees(department).subscribe(
      data => {this.employees = data}, 
      err => this.logger.error(err), 
     () => {this.logger.log('done loading'); 
       this.employeesSub.unsubscribe()} 
    ); 
}

正如你看到组件初始化时它调用两个获取数据的方法。这些方法从我的服务中获得可观察的并订阅它们。
问题是，订单就像call1, call2, result1, result2, ...，我认为有不对的地方。应该是call1, result1, call2, result2, ...还是我错了？我试着在observable1的onComplete中订阅observable2，但我认为专用方法当时是无用的。 我已经研究并找到了一些解决方案，同时用concat同时订阅两个observables，但是我只希望getDepartments（）在所有数据流量完成时继续执行代码。

而且我应该取消订阅OnDestroy()或OnComplete的subscribe函数，我真的没有什么区别吗？

回答：

如果要控制可观察的执行顺序，就需要建立像flatMap（串联执行）或Observable.forkJoin（以并行执行）

下面是样本异步数据流利用操作符：

// Series 
someObservable.flatMap(result1 => { 
    return someOtherObservable; 
}).subscribe(result2 => { 
    (...) 
    (...) 
}); 
// Parallel 
Observable.forkJoin([ someObservable, someOtherObservable ]) 
    .subscribe(results => { 
    let result1 = results[0]; 
    let result2 = results[1]; 
    });

回答：

通常，这些调用是异步的，因此执行顺序和/或到达结果不是确定性的。 （例如：如果从API 1请求数据，然后从API 2请求数据，那么甚至可能导致API 2的数据在API 1的数据速度特别慢或数据量巨大之前到达API 1的数据之前到达）。第一个问题：是的，你错了。

订阅Observable时，您可能会有一些回调函数（数据接收的地方被使用或存储），一旦数据到达，第一个服务就会执行该函数。如果仅在接收到第一个呼叫的结果后触发第二个API调用很重要，则该功能将是从第二个服务请求数据的地方。 当然，您不希望将服务1和服务2耦合在一起，所以更好的方法是将回调函数传递给服务1，服务1将在成功时调用。然后，您的客户端代码可以确保此回调函数请求来自第二个服务的数据。当然，如何处理这种情况有很多种方法，而我之前描述的只是一种简单的方法。

关于取消订阅问题：通常，在接收结果时不希望取消订阅，因为之后可能会有更多数据进入。 （这是Promises和Obvservables之间的主要区别之一）。例如，在我正在处理的应用程序中，当我“离开”组件时取消订阅，因为我做想在我收到初始数据后继续订阅。

以上是 如何在Angular 2中“链接”两个独立的可观察对象 的全部内容， 来源链接： utcz.com/qa/262092.html

回到顶部