如何将数据传递给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

只需在类中定义数据并在angular{{ }}的插值语法中绑定，不需要像这样使用额外的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

Answer 2

您不必使用 jquery 在 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(){}
}