angular - 如何将数据传递给 Angular2 中的引导模式对话框

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

只需在类中定义数据并绑定(bind)在angular {{ }} 的插值语法中，无需像这样使用额外的JQuery :-

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

并像这样在 HTML 中使用:-

{{Text}} and {{Header}}

Working Plunker

或者，如果您想将此模态用作组件并传递数据，则可以使用 Eventemitter这是示例 Working Example With Eventemitter

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

要将数据动态发送到模态，您必须为 Bootstrap 模态创建一个组件。与使用 @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 请求

你必须在 Angular 的 ngOnInit Hook 中发出 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