Внедрить данные в компонент в Bootstrap Modal на Angular 4

Question

Внедрить данные в компонент в Bootstrap Modal на Angular 4

1

Я использую @ng-bootstrap/ng-bootstrap, который добавляет компоненты Bootstrap в Angular. Вы можете вставлять компоненты в открытый Модаль, поэтому инжектированный компонент составляет тело/содержимое открытого модального.

У меня есть список Player. Когда я нажимаю на плеер, я хочу открыть Модаль с помощью данных игрока с кликом внутри него. Я могу открыть Modal с инъецированным PlayerComponent следующим образом.

constructor(
  private modalService: NgbModal
) { }

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

Вопрос в том, как... Как добавить дополнительные данные к компоненту, чтобы он знал, какие данные игрока извлекаются? Например, у меня может быть интерфейс OnInit на PlayerComponent который извлекает данные из API на основе идентификатора, предоставленного modalService.open().

Marcus Lind 07 июнь 2017, в 13:01

Источник

Теги:

angular

javascript

ng-bootstrap

1 ответ

Ещё вопросы

Marcus Lind · Accepted Answer · 2017-06-07T10-01-00.000Z

Похоже, что @ng-angular/ng-angular позволяет вам коснуться экземпляра компонента после его создания. Поэтому вы можете изменить значения.

Таким образом, решение будет:

constructor(
  private modalService: NgbModal
) { }

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

А затем @Input() компонент использовать @Input() decorator на player_id.

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

кажется правильным решением, а не обходным решением, например, обработкой параметров маршрута.