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

Question

我正在使用 @ng-bootstrap/ng-bootstrap，它将 Bootstrap 个组件添加到 Angular。您可以将组件注入打开的模态框，因此注入的组件构成打开的模态框的body/content。

我有一个 Player 的列表。当我点击一个播放器时，我想打开一个模式，其中包含点击播放器的数据。我可以像这样打开带有注入 PlayerComponent 的模式。

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;
  ...
}

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

Inject data into component in Bootstrap Modal on Angular 4

javascript

ng-bootstrap

angular