2016-01-18 4 views
2

Я создаю некоторые компоненты, чтобы изучить Angular2.Доступ Угловой 2 Входы (свойства) внутри конструктора

У меня есть этот базовый HTML:

<h1>test</h1> 
<btn [order]="0"></btn> 
<btn [order]="1"></btn> 
<btn [order]="2"></btn> 

И в 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) 
    } 
} 

Делать это я неопределенными, что я делаю неправильно? как я могу прочитать входы (или атрибут) для отправки данных в класс?

EDIT

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

Вам все еще нужно, чтобы ввести 'DataService' используя' конструктора (DATASERVICE: DATASERVICE) ', но вы не можете получить доступ к' порядка @Input(); 'там еще. Вы все равно можете получить доступ к 'dataService' из' ngOnInit() ', используя' this.dataService'. –

ответ

7

Вы не можете получить доступ к ним в конструкторе, они еще не инициализирован. Вместо этого используйте 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); 
    } 
} 
Смежные вопросы