如何在Angular2中将数据传递给bootstrap模式对话框

Question

我试图在Angular 2应用程序中显示一个对话框.我使用下面的代码.我能够打开对话框,现在我需要将数据传递给对话框,我该怎么做？我尝试编写JQuery代码来做到这一点,但JQuery代码在angular2应用程序中对我不起作用.

<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

只需在类中定义数据并绑定角度的插值语法{{ }},不需要像这样使用额外的JQuery: -

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

并在HTML中使用如下: -

{{Text}} and {{Header}}

Working Plunker

或者,如果您想将此模态用作组件并希望传递数据,则可以使用Eventemitter 此处为例Working Example With Eventemitter

更新 - 在模态中设置动态值

要将数据动态发送到模态,您必须为引导模式创建一个组件.比使用@Input()你能够在模态中设置动态值,如下所示: -

 @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请求

你必须在ngOnInit角度的钩子中发出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