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

Question

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

我有一个清单Player。当我单击一个播放器时，我想打开一个带有点击的播放器数据的模态。我可以PlayerComponent像这样注入一个Modal 。

constructor(
  private modalService: NgbModal
) { }

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

问题是... 我该如何向该组件注入其他数据以使其知道要提取哪些播放器的数据？例如，我上可能有一个OnInit接口，该PlayerComponent接口根据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;
}

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

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