angular - 通过在 typescript 中调用方法打开 bootstrap 4 模式

Question

我正在使用 bootstrap 4 modal 在我的 Angular 应用程序(v6)中:

代码:

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

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>

      </div>
    </div>
  </div>

</div>

现在我将通过单击打开 按钮打开模式。这工作正常。但不是手动打开它，点击 open 按钮我需要调用 method/function for ex:

open() {
     if('Some condition'){
       // Don't open the modal
     } else {
        // Open the modal
     }

   }

在 open() 方法中如果条件失败 modal 应该打开，否则不应该打开。我如何只使用 typescript

Stackblitz Demo

Answer 1

您需要使用 @ViewChild 指令来实现此目的。只需添加以下代码:

<!-- The Modal -->
  <div class="modal" id="myModal"  #content>
    <div class="modal-dialog">
      ...... further code

在你的 component.ts 文件中:

export class AppComponent implements OnInit {

     @ViewChild('content') content: any;
     public  ngOnInit() {
  }

   public open() {
     if(!true){
       // Dont open the modal
     } else {
        // Open the modal
        this.content.open();
     }

   }

已更新 stackblitz: https://stackblitz.com/edit/angular-ckggpk