我刚刚开始使用Angular2并解决了以下问题。模板(主要组件):
<span *ngFor="#data of dataset" >
<data-widget [data]="data"></data-widget>
</span>
模板(小部件组件):
<div>{{someCompValue}}</div>
someCompValue 的值需要从数据成员变量中的属性集创建。
我应该在哪里注入代码来计算 someCompValue?我试图在 constructor() 中执行此操作,但那一刻数据尚未分配 (=null)。
使用ngOnInit
(ref):
在 Angular 初始化数据绑定输入属性后初始化指令/组件。
所以在组件中:
@Component(...)
export class DataWidget {
@Input data: Xxxx;
constructor() { ... }
ngOnInit() {
// this.data should be set and ready to use here
}
}
编辑:查看Günter Zöchbauer的答案,注意:如果数据在组件初始化时仅计算一次,请使用ngOnInit
;如果要在开始时计算数据并在每次输入更改时重新计算,请使用ngOnChanges
(根据Günter的答案)。
@Component({
selector: 'data-widget',
template`<div>{{someCompValue}}</div>`})
class DataWidget {
@Input() data;
ngOnChanges(change) {
this.someCompValue = doCalculationBasedOnData();
}
}
另请参阅OnChanges实时周期回调。