Angular async ngOnInit 实例化一个需要的属性

Question

我在 Angular 组件中有一个属性，通过 async ngOnInit 中的服务实例化：

txtItems: TextItems[];
 
constructor(private textItemService: TextItemService) {}

async ngOnInit() {    
    // await on promise
    this.txtItems = await this.textItemService.getAllAsync();
}

其中 getAllAsync returns 承诺：

async getAllAsync(): Promise<TextItems[]> {
   return await this.http.get<TextItems[]>(this.url).toPromise();
}

ngOnInit 异步运行，这样页面就不必挂起直到加载项目（这是一件好事），但有时 this.txtItems 在完成之前从模板访问加载，导致异常。

我可以让 ngOnInit 不是 async，但是页面会加载缓慢。

我应该使用 txtItems: Promise<TextItems[]> 或类似的东西，然后使用 async 管道从任何地方访问它吗？等待异步服务时正确的做法是什么？

Answer 1

这是将可观察对象转换为承诺的经典案例，但没有任何经证实的优势。鉴于 HTTP 请求的输出仅在模板中使用，您可以 return 服务中的可观察值并使用 async 管道在模板中使用它的值。

服务

getAllAsync(): Observable<TextItems[]> {
   return this.http.get<TextItems[]>(this.url);
}

组件

public txtItems$: Observable<TextItems[]>;

constructor(private textItemService: TextItemService) {
  this.txtItems$ = this.textItemService.getAllAsync();   // <-- no `await`, only assignment
}

模板

<ng-container *ngIf="(txtItems$ | async) as txtItems">
  <!-- use `txtItems` -->
</ng-container>

Angular async ngOnInit 实例化一个需要的属性

Angular async ngOnInit instantiating a needed property

promise

async-await

ngoninit

angular

Angular async ngOnInit 实例化一个需要的 属性

Angular async ngOnInit instantiating a needed property

promise

async-await

ngoninit

angular

Angular async ngOnInit 实例化一个需要的属性