Angular2 @Input 和生命周期钩子(Hook)

Question

我有以下组件:

export class AddressListComponent implements AfterViewInit{   
  @Input() districts: District[] = [];

  constructor() { }

  ngAfterViewInit() {
    console.log(this.districts);   } }

所以它控制台将分区记录为空数组，但我将它作为输入非空数组发送，它显示得很好这个 html:

<a *ngFor = "let district of districts; let i = index"  class="list-group-item clearfix" >
        WORKS
 </a>

所以我的下一个问题是:在生命周期 Hook 中，我何时能够从 districts 数组中获取日志数据？因为我需要在显示到 html 之前更改它

Answer 1

when in the lifecycle hook am I able to console log data from districts array

第一次初始化组件时，所有输入都在 ngOnInit 生命周期 Hook 中可用。对于后续更新，请使用 ngOnChanges。或者您可以仅使用 ngOnChanges，因为它在组件初始化时也会被调用。

从Everything you need to know about change detection in Angular中提到的操作顺序可以看出:

1) 更新子组件/指令实例的输入属性
...
3) 如果绑定(bind)发生变化，则在子组件上调用 OnChanges 生命周期钩子(Hook)
4) 在子组件上调用 OnInit 和 ngDoCheck(OnInit 仅在第一次检查时调用)