如何从打字稿文件打开引导弹出模式答案

【问题标题】：How to open bootstrap popup model from typescript file如何从打字稿文件打开引导弹出模式
【发布时间】：2020-11-23 06:12:59
【问题描述】：

我正在开发 Angular 项目，当我的 function 被调用时启动弹出模型。我在 w3schools 上找到了example ，但这有所有html 逻辑来打开它。

当openPopup() 函数被调用时，我想从ts 文件中打开它。

弹出模型html来自给定链接的代码。

<body>
<div class="container">

  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">         
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
      </div>
    </div>
  </div>
  
</div>
</body>

这是打开弹出窗口的按钮

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>

如何将此代码替换为ts 文件事件？

【问题讨论】：

@AlwaysHelping - 这纯粹是Angular 问题。如果我说 ts 文件，则表示我想写入 typescript 文件。
我之所以这么说，是因为添加更多信息会得到更多回应。就是这样:)
@AlwaysHelping - 哦，太好了。

标签： javascript html angular typescript twitter-bootstrap

【解决方案1】：

创建一个像这样的变量。并从模式中移除切换元素。

// in ts
 openModal: false;

//then in button click event:

  <button (click)="openModalClick()"></button>
 //in ts:

  openModalClick(){
  openModal=!openModal;
 }
 //in html
<div class="modal fade" id="myModal" *ngIf="openModal">

</div>

这将以 ts 方式工作，如果你想用 bootstrap 切换，然后选择带有 id 的按钮并使用 java 脚本 .click()。

【讨论】：