Как получить входные данные, переданные из родительского компонента в Angular2

Question

У меня есть компонент списка воспроизведения в качестве дочернего компонента Компонент, родительский проход во входном «плейлисте», который является объектом массива.

playList: { 
    headerPlaylists: Array<any>, 
    bodyPlaylists: Array<any> 
    } = { 
    headerPlaylists: [], 
    bodyPlaylists: [] 
    } 

Компонент Ребенок, как показано ниже

@Component({ 
    selector: 'playlist', 
    styleUrls: ['app/channel/playlist/playlist.css'], 
    templateUrl: 'app/channel/playlist/playlist.html', 
    directives: [VideoItemComponent], 
    inputs: ['playlist'] 
}) 

Мой вопрос, в моем классе, как я могу получить доступ к входам передается из его родителя компонент, скажем, просто console.log (список воспроизведения), Есть ли способ сделать это?

export class PlaylistComponent { 

    constructor() { 

    } 
} 

Answer 1

Thierry правильно w.r.t. доступность входов на протяжении всего жизненного цикла, но как это работает, гораздо яснее, если вы используете @Input() в поле, а не inputs в метаданных.

@Component({ 
    selector: 'playlist', 
    styleUrls: ['app/channel/playlist/playlist.css'], 
    templateUrl: 'app/channel/playlist/playlist.html', 
    directives: [VideoItemComponent], 
// inputs: ['playlist'] // would be redundant 
}) 
class PlaylistComponent implements OnInit { 
    @Input() playlist: YourPlaylistType; // i.e. the data structure you posted 

    ngOnInit(){ 
    // use this.playlist 
    } 
} 

Следует отметить, что, в основном, по этой причине, с указанием входов с помощью @Input() является предпочтительным по сравнению с использованием входов в соответствии с ng2 style guide.

Answer 2

Свойство playlist будет доступно в рамках методы ngOnInit крюка компонента:

export class PlaylistComponent { 
    playlist: any; // or a specify type instead of any 

    constructor() { 
    console.log(this.playlist); // is null 
    } 

    ngOnInit() { 
    console.log(this.playlist); // is set 
    } 
} 

В конструкторе, свойство еще не установлено.

Для получения более подробной информации, обратитесь к этой странице о жизненном цикле крючках:

• https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html