如何在Angular 2中“鏈接”兩個單獨的可觀察量

Question

我正在使用Angular2開發一個Web應用程序，我從服務器獲取數據時遇到了一些問題。

 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訂閱了兩個observable，但我只是希望代碼在所有數據流量完成后繼續在getDepartments（）之后繼續。

我應該在subscribe函數的OnDestroy()或OnComplete中取消subscribe我真的沒有區別嗎？

Answer 1

如果要控制observable的執行順序，則需要構建一個異步數據流，利用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];
  });

Answer 2

通常，這種調用是異步的，因此，執行順序和/或到達結果不是確定性的。 （例如：當從API 1請求數據，然后從API 2請求數據時，如果API 1特別慢或數據量很大，它甚至可能導致API 2中的數據到達來自API 1的數據之前。）所以，回答你的問題第一個問題：是的，你錯了。

訂閱Observable時，您可能會有一些回調函數（使用或存儲接收數據的位置），一旦數據到達，它將由第一個服務執行。 如果僅在收到第一次調用的結果后觸發第二個API調用很重要，則此函數將是從第二個服務請求數據的位置。 當然，您不希望將服務1和服務2耦合在一起，因此更好的方法是將回調函數傳遞給服務1，以便在成功時調用。 然后，您的客戶端代碼可以確保此回調函數從第二個服務請求數據。 當然，有很多方法可以處理這種情況，我之前描述的只是一種簡單的方法。

關於取消訂閱問題：通常，在接收結果時不希望取消訂閱，因為之后可能會有更多數據進入。 （這是Promises和Obvservables之間的主要區別之一）。 舉例來說，在我工作的一個程序，我退訂時，“離開”的組成部分，因為我想繼續我收到初始數據后訂閱。