Question

我有播放列表组件作为子组件，父输入输入＆＃39;播放列表＆＃39;这是一个数组对象。

  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

如何访问Angular 2

2 个答案: