如何打开模态并在模态

Question

我的应用程序中有一个模态，目前使用bootsrap打开：

<div class="modal full-page fade" tabindex="-1" role="dialog" id="fullpageModal">
    <div class="full-page-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
         <iframe src="http://www.example.com/id/1"></iframe>

在我的HTML中，我有一个附加到功能的按钮：

<button (click)="initPlay(2)" data-toggle="modal" data-target="#fullpageModal" >PLAY</button>

目前bootstrap打开模态，Angular处理点击。

需要做的是：

1. 用户点击按钮
2. 根据点击的按钮
更新iFrame URL src
3. 模态可见。

我认为我需要做的是：

1. 从bootstrap中移除模态的开口并将其交给Angular2
2. 在按钮上单击该功能会更新iframe src
3. 然后该函数打开模态（或将其交回Bootstrap？）

我的问题：

1. 更新iframe src的最佳方法是什么？也许要包含一个变量：{{iframeSrc}}并在点击后更新它？

2. 处理模态开放的最佳方法是什么？

谢谢！

Answer 1

事实证明这很简单。

我创建了两个函数：

initPlay(id) {
    this.iframeSrc = "http://example.com/game/" + id;
}

clearPlay() {
    this.iframeSrc = "";
}

我离开bootstrap来管理模态打开和关闭，并简单地使用Angular2（click）方法来启动src更改。

我添加了一个＆＃34; loading＆＃34; iframe的类，表示正在进行操作。

多数民众赞成。