在构造函数中访问Angular 2输入(属性)

Pab*_*blo 2 javascript angular

我正在创建一些组件以学习Angular2.

我有这个基本的HTML:

<h1>test</h1>
<btn [order]="0"></btn>
<btn [order]="1"></btn>
<btn [order]="2"></btn>
Run Code Online (Sandbox Code Playgroud)

ts我有这个:

import {Component, Input} from 'angular2/core';
import {DataService} from '../services/DataService';

@Component({
    selector: 'btn',
    template: '<button>test{{ item }}</button>',
    inputs: ['order']
})

export class ButtonComponent {
    items: Array<number>;
    item: number;
    @Input() order;

    constructor(dataService: DataService) {
        console.log(this.order)
    }
}
Run Code Online (Sandbox Code Playgroud)

这样做我得到了不确定,我做错了什么?如何读取输入(或属性)以便将数据发送到类?

编辑

import {Component, Input} from 'angular2/core';
import {DataService} from '../services/DataService';

@Component({
    selector: 'btn',
    template: '<button>test{{ item }}</button>',
    inputs: ['order']
})

export class ButtonComponent {
    items: Array<number>;
    item: number;
    @Input() order;

    ngOnInit(dataService: DataService) {
        this.items = dataService.getItems();
        console.log(this.order)
    }

    constructor() {}
}
Run Code Online (Sandbox Code Playgroud)

Gün*_*uer 8

您无法在构造函数中访问它们,它们尚未初始化.请ngOnInit()改用.有关详细信息,请参阅https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

export class ButtonComponent implements OnInit {
    items: Array<number>;
    item: number;
    @Input() order;

    constructor(dataService: DataService) {  }

    ngOnInit() {
      console.log(this.order);
    }
}
Run Code Online (Sandbox Code Playgroud)