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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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