Bootstrap Modalのコンポーネントにデータを注入する4

Question

BootstrapコンポーネントをAngularに追加する@ ng-bootstrap/ng-bootstrapを使用しています。開いたモーダルにコンポーネントを注入することができます。注入されたコンポーネントは、開いたモーダルのボディ/コンテンツを構成します。

私はPlayerのリストを持っています。プレーヤーをクリックすると、クリックされたプレーヤーのデータが入ったモーダルを開きたいと思います。私はこのように注入されたPlayerComponentでモーダルを開くことができます。

constructor(
    private modalService: NgbModal 
) { } 

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

質問は... はどのように私はそれがプレイヤーのデータをフェッチするために何を知っているようにコンポーネントに追加のデータを挿入しますか？など。私は、呼び出しで提供されたIDに基づいてAPIからデータをフェッチするPlayerComponent上にOnInitインターフェースを持つかもしれません。

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