更新 - 在模态

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

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

2 个答案:

更新 - 在模态

update2 HTTP请求