How to pass data to bootstrap modal dialog in Angular2

问题

I am trying to show up a dialog in an Angular 2 application. I am using the below code for that. I am able to open up the dialog and now I need to pass the data to the dialog, how can I do that ?? I tried writting JQuery code to do that but JQuery code doesnt work for me in the angular2 application.

<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>

回答1:

Simply define data in the class and bind in the interpolation syntax of angular {{ }} , No need to use extra JQuery like this :-

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

and used in HTML like this:-

{{Text}} and {{Header}}

Working Plunker

Alternatively if you want to use this modal as component and want to pass data than you can use Eventemitter here is example Working Example With Eventemitter

Update - Setting Dynamic value in the modal

To Send data dynamically to the modal you have to create one component for the bootstrap modal. than by using @Input() you are able to set dynamic value in the modal like this :-

 @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 request

you have to make http request in the ngOnInit hook of angular, you already got you dynamical data than you can do manipulation as you want :-

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

回答2:

You shouldn't have to use jquery to show data in Angular.

You could do something like this.

@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(){}
}

来源：https://stackoverflow.com/questions/37474219/how-to-pass-data-to-bootstrap-modal-dialog-in-angular2