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>

所以我的问题是下一个：在生命周期钩子中我能否从districts数组中控制日志数据？因为我需要在显示html之前更改它

Answer 1

在生命周期钩子中我能够控制日志数据地区阵列

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

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

1）更新子组件/指令实例的输入属性
...
3）如果绑定改变了，则在子组件上调用OnChanges生命周期钩子 4）对子组件调用OnInit和ngDoCheck（仅在首次检查时调用OnInit）

Answer 2

应该可以正常工作。我认为您的父组件在加载districts后填充变量AddressListComponent。在设置变量districts之前检查以加载子组件，或使用ngOnChanges而不是ngAfterViewInit（ngOnChangess挂钩到每个更改，而不仅仅是组件的init）

Angular2 @Input和生命周期钩子

2 个答案: