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，而不是填充现有数组。否则，角度变化检测不会识别出变化。

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

2 个答案: