如何处理组件中的异步输入？

Question

我遇到了ngOnChange 的问题。我有以下组件：

@Component({
    selector:'user-table',
    template: `...`,

})

export class UserTable implements OnChanges{
    @Input() users: User[];
    years:string[];
    constructor(private _usersCollection:UsersCollection){
    }

    ngOnChanges(){
     if (this.users.length)
       {this.years =this._usersCollection.createYearsArray(this.users)}
    }
}

但是，如果条件只检查一次 - 当 this.users 尚未从服务器获取时，因此其长度为 0。我如何找到处理这种异步输入的解决方案？

数组已更新，就像我设置以下日志时一样：

    console.log('ON FIRST INIT' , this.programs);
    this.years = this._usersCollection.createYearsArray();
    console.log(this.years);
    setInterval(()=>{
        console.log('IN INTERVVAL' , this.programs);
    },1000);

控制台输出为：

ON FIRST INIT []
UsersTable.component.ts:21 []
UsersTable.component.ts:23 IN INTERVVAL [Object, Object, Object, Object]

Answer 1

如果您在输入属性更改时不需要执行任何逻辑（例如，您仅在模板绑定中使用该属性），则无需执行任何操作。 Angular 会自动将新值从父属性向下传播到输入属性。

如果您想在输入属性更改时执行某些组件逻辑，请使用ngOnChanges()，每当任何组件输入属性更改时都会调用它。

由于 Angular 使用 === 来检测变化（好吧，NaN 也有一些特殊处理），这意味着

• 对于引用类型（数组、对象、日期等），引用（即数组、对象等引用）必须更改。例如，myArray = someNewArray;
  如果数组中只有一个项目发生变化，ngOnChanges() 不会被调用。例如，对于 myArray[0].name = newName; 等更改，不会调用 ngOnChanges()。
• 对于原始类型（数字、布尔值、字符串），这仅仅意味着值必须改变。例如，myNumber = 5; 或 myNumber = newNumber；

---

另一种选择是使用ngDoCheck() 实现您自己的更改检测逻辑。有关示例，请参阅this answer。该生命周期钩子被称为“每次检查组件或指令的输入属性时。通过执行自定义检查使用它来扩展更改检测”——来自lifecyle hooks.md

Answer 2

ngOnChanges() 在users 更新时被调用。您只需要确保在父组件中分配了一个新数组users，而不是填充现有数组。否则 Angulars 更改检测将无法识别更改。