如何从 Angular 中的异步输入中获取“就绪”值

Posted 2023-02-23

【中文标题】如何从 Angular 中的异步输入中获取“就绪”值

【英文标题】：How to get 'ready' value from async input in Angular

【发布时间】：2021-10-14 16:22:40

【问题描述】：

在我的父组件中，我将异步值作为输入传递

<app-mycomponent [numberVal]="(numbers$ | async).total" [max]="max"></app-mycomponent>

在我的子组件中，我需要使用这个“numberVal”值来进行一些计算，但是当我在控制台上登录时，ngOnInit() 值还没有准备好，所以它是空的。

  @Input() numberVal: number; // total products

   ngOnInit(): void 
console.log(this.numberVal) 
  

我尝试使用 ngOnChanges，但它也不起作用。

【问题讨论】：

看到这个：***.com/questions/62684444/…

创建组件时为null是有道理的。改用ngOnChanges 并检查 numberVal 是否不为空。

【参考方案1】：

由于我们要处理async操作，所以在创建组件时该值为null是有意义的。

observer完成后获取值，需要这样实现ngOnChanges：

ngOnChanges(changes: SimpleChanges) 
    if (changes['numberVal']) 
      this.numberVal = changes['numberVal'].currentValue;
      console.log(this.numberVal);
    

我创建了一个简单的stackblitz 项目来演示这一点。