Question

我正在将数组传递给我的组件，如此;

 <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
}

然而，它似乎是未定义的＆＃39;在我使用它的那一点。如果我记录它的值以响应按下按钮我看到它被设置，如果我把它放在出口类的开头＃39;或者在＆＃39;构造函数＆＃39;中它没有设置！

我应该在哪里设置＆＃39; barChartLabels：string []＆＃39;？

Answer 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() { }
}

angular2组件生命周期

1 个答案: