在Angular 4的Bootstrap模式中将数据注入组件

Question

我正在使用@ ng-bootstrap / ng-bootstrap，它将Bootstrap组件添加到Angular。 您可以将组件注入到打开的模态中，因此注入的组件构成了打开的模态的主体/内容。

我有一个Player列表。 当我单击一个播放器时，我想打开一个模态，其中包含被单击的播放器的数据。 我可以使用注入的PlayerComponent打开一个Modal。

constructor(
  private modalService: NgbModal
) { }

openPlayerModal() {
  const modalRef = this.modalService.open(PlayerComponent)
}

问题是... 我该如何向该组件注入其他数据以使其知道要提取哪些播放器的数据？ 例如，我可能在PlayerComponent上有一个OnInit接口，该接口根据modalService.open()调用提供的ID从API提取数据。

Answer 1

好像@ng-angular/ng-angular允许您在实例化组件实例之后触摸它。 因此，您可以修改值。

所以解决方案是：

constructor(
  private modalService: NgbModal
) { }

openPlayerModal() {
  const modalRef = this.modalService.open(PlayerComponent)
  modalRef.componentInstance.player_id = 1;
}

然后使组件在player_id上使用@Input()装饰器。

export class PlayerComponent {
  @Input() player_id;
  ...
}