So übergeben Sie Daten zum modalen Bootstrap-Dialog in Angular2

Question

Ich versuche, einen Dialog in einer Angular 2-Anwendung zu zeigen. Ich verwende den folgenden Code dafür. Ich bin in der Lage, den Dialog zu öffnen und jetzt muss ich die Daten an den Dialog übergeben, wie kann ich das tun? Ich habe versucht, JQuery-Code zu schreiben, aber JQuery-Code funktioniert nicht für mich in der angular2-Anwendung.

<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

Sie sollten jquery nicht verwenden, um Daten in Angular anzuzeigen.

Sie könnten so etwas tun.

@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

einfach definieren Daten in der Klasse und binden in der Interpolation Syntax von Winkel {{ }}, keine Notwendigkeit, zusätzliche JQuery wie folgt zu verwenden: -

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

und in HTML wie folgt verwendet: -

{{Text}} and {{Header}} 

Working Plunker

Alternativ, wenn Sie diese modal als Komponente verwenden möchten, und möchten Daten zu übergeben, als Sie Eventemitter hier verwenden können, ist beispielsweise Working Example With Eventemitter

Update - Dynamischer Wert im Modal

Einstellung zum Senden von Daten dynamisch an das Modal müssen Sie eine Komponente für das Bootstrap-Modal erstellen. als durch @Input() verwenden Sie können dynamischen Wert in den modalen wie folgt festgelegt: -

@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

update2 HTTP-Anforderung

Sie haben HTTP-Anfrage in dem ngOnInit Haken machen von eckigen, haben Sie bereits dynamische Daten, als Sie Manipulation tun können, wie Sie wollen: -

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