angular2 组件生命周期答案

【问题标题】：angular2 component lifecycleangular2 组件生命周期
【发布时间】：2017-02-03 03:58:22
【问题描述】：

我像这样将一个数组传递给我的组件；

 <app-bar-chart-demo [chartLabelObject]="['2006', '2007', '2008', '2009', '2010', '2011', '2012']"></app-bar-chart-demo>

我正在像这样在组件中检索该数组

    @Component({
...
      inputs:['chartLabelObject']
    })

然后我像这样设置一个变量的值

    export class BarChartDemoComponent {
     ...
      barChartLabels:string[] = this.chartLabelObject;
...//and doing stuff with it
}

但是，在我使用它时它似乎是“未定义”。如果我记录它的值以响应按下按钮，我会看到它已设置，如果我将它放入“导出类”的开头或以下的“构造函数”未设置！

我应该在哪里设置'barChartLabels:string[]'？

【问题讨论】：

标签： javascript html css angular

【解决方案1】：

对输入属性的每次更改都会触发对组件上的ngOnChanges 的调用。您应该在此处设置 barChartLabels 属性。

@Component({
  ...
  inputs:['chartLabelObject']
})
export class BarChartDemoComponent implements OnChanges {
  barChartLabels:string[];

  constructor() { }

  ngOnChanges(changes){
      if(changes["chartLabelObject"]){
          this.barChartLabels = this.chartLabelObject;
      }
  } 
}

您还可以稍微清理一下您的逻辑，然后使用 @Input 装饰器将输入直接映射到您的输入，如下所示：

@Component({
  ...
})
export class BarChartDemoComponent {
  @Input('chartLabelObject') barChartLabels:string[];

  constructor() { }
}

【讨论】：