Angular2のブートストラップモーダルダイアログにデータを渡す方法

Question

Angular 2アプリケーションでダイアログを表示しようとしています。私はそれのために以下のコードを使用しています。私はダイアログを開いて、ダイアログにデータを渡す必要があります。どのようにすればいいですか？私はそれを行うためにJQueryのコードを書いてみましたが、JQueryのコードは私のためにangle2のアプリケーションで動作しません。

<div class="container"> 
    <h2>Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Modal Header</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Some text in the modal.</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 

     </div> 
    </div> 

</div> 

Answer 1

データをAngularで表示する必要はありません。

あなたはこのようなことをすることができます。

@Component({ 
    template:`<div class="container"> 
    <h2>Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">{{modal.header}}</h4> 
       </div> 
       <div class="modal-body"> 
        <p>{{modal.text}}</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 

     </div> 
    </div> 

</div>` 
}) 

export class ComponentThatUSESMODAL{ 
    public modal = { 
    "header":"MODAL HEADER", 
    "text" : "MODAL TEXT" 
    }; 
    constructor(){} 
} 

Answer 2

だけで、角度{{ }}の補間構文でこのように余分なjQueryのを使用する必要がクラスとバインド内のデータを定義していない： - ：

- このような

Header: string = 'Angular2+Bootstrap Modal'; 
Text: string = "Description Here...."; 

とHTMLで使用します

{{Text}} and {{Header}} 

Working Plunker

に動的にデータを送信するために、モーダル

で動的な値を設定する - あなたがここにEventemitter を使用することができますよりも、あなたがコンポーネントとして、このモーダルを使用すると、データを渡したい場合は

はまたWorking Example With Eventemitter

更新例ですモーダルは、ブートストラップモーダルのために1つのコンポーネントを作成する必要があります。 @Input()を使用するよりも、あなたがこのようなモーダルで動的な値を設定することができます： - あなたはngOnInitフックでHTTPリクエストを行う必要があり

@Input() header :any; 

<div class="col-sm-12 col-md-6 text-center"> 
      <a *ngFor='#Number of data'> 
       {{Number.id}} &nbsp; &nbsp; {{Number.label}} &nbsp; &nbsp; 
       <delete [header]="Number.label" [pk]='Number.id'></delete><br> 
      </a> 
     </div> 

Working Demo of Setting Dynamic Value in Modal

アップデート2 HTTPリクエスト

あなたはすでにあなたが望むように操作することができるよりもダイナミックデータを得ています： -

ngOnInit() { 
    console.log(this.header); // here is the value that you passed dynamically 

    this.http.get('app/cities.json') // making http request here 
     .map(res => res.json()) 
     .subscribe(res => console.log(res, "Subscribe Response")) 
    } 

Working Example With HTTP request