Question

我有一项服务用作本地数据存储，以在整个应用中共享数据。此服务在开始时进行一些休息调用以初始化一些数据。它看起来像这样：

Injectable()
export class DataStoreService {
     leadList: LeadModel[]
     optyList: ContactModel[]

     constructor(public dataService:DataService){
         this.initializeData()
     }

     initializeData() {

         this.dataService.getObjectData('opportunities').subscribe(
             (data) =>  this.optyList = data
         )

         this.dataService.getObjectData('leads').subscribe(
             (data) =>  this.leadList = data
         )
     }
}

我有一个组件页面，我在下面做：

ngOnInit() {
     for(let lead of this.dataStore.leadList){
             if(lead.accepted == false)
              this.newLeadsList.push(lead)
     }
}

很明显，如果初始化数据未能完成，则leadList可能未定义，并且此ngOnInit for循环也将崩溃。那么，在initializeData完成之前，如何在ngOnInit中等待？

Answer 1

从构造函数中删除initializeData()并执行以下操作：

public async initializeData()
{
   this.optyList = await this.dataService.getObjectData('opportunities').toPromise();
   this.leadList = await this.dataService.getObjectData('leads').toPromise();
}


async ngOnInit() 
{
     await initializeData();

     for(let lead of this.dataStore.leadList){
         if(lead.accepted == false)
         this.newLeadsList.push(lead)
     }  
}

我从头开始编写代码，因此它可能会有一些错误 - 可能在函数ngOnInit()之前也应该异步...检查这个。

Async-await-toPromise使你的异步函数表现为同步函数......并且JS等到你的toPromise完成后再执行另一个promise ......

更新

如果我理解你的话：你想打电话给你的服务＆＃34; DataStoreService.initializeData()＆＃34;一次，将来在其他组件中使用它（不再调用initializeData） - ？ - 如果是，则需要服务singleton（也可以使用上面的async-await技术）

Answer 2

您可以使用的是可观察对象，在这种情况下是您订阅的BehaviorSubject，如果有订阅者则始终发出。在发出初始请求之后，只需调用next，所有订阅的组件将在最终到达时获得值：

DataStoreService：

import {BehaviorSubject} from 'rxjs/BehaviorSubject';

// ...

leadList: LeadModel[]
leadList$ = new BehaviorSubject<LeadModel[]>([])

constructor(public dataService:DataService){
  this.initializeData()
}

initializeData() {
  this.dataService.getObjectData('leads')
    .subscribe((data) =>  {
      this.leadList = data;
      this.leadList$.next(this.leadList)
    })
}

然后在您的组件中，订阅leadList$：

leadList = <LeadModel[]>[];

ngOnInit() {
  this.dataStore.leadList$.subscribe(data => {
    this.leadList = data;
    // do your magic here :)
  })
}

angular等待方法完成或者要初始化的变量

2 个答案:

更新