Html ngbootstrap模式从angular 5中的组件Typescript文件弹出

我有下面的代码打开一个模式按钮点击。如何从组件ts文件中的函数打开模态？我的html如下所示：

打开模式框
样本模态
&时代；
单击“确定”关闭



好啊

您可以按如下所示隐藏按钮

[hidden]=“true”

：

带角度使用

ElementRef

<button #btn id="openModalButton" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" [hidden]="true">Open The Modal Box</button>

---

您可以按如下步骤隐藏按钮

[hidden]=“true”

：

带角度使用

ElementRef

<button #btn id="openModalButton" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" [hidden]="true">Open The Modal Box</button>

---

如果您使用的是ngbootstrap，那么您可以从TS文件轻松地完成它

ngbootstrap模式弹出示例

---

如果您使用的是ngbootstrap，那么您可以从TS文件轻松地执行此操作

ngbootstrap模式弹出示例

---

请告诉我更多帮助谢谢您的回复。我们是否可以选择从typescript和angular而不是使用javascript代码来执行此操作？请告诉我更多帮助谢谢您的回复。我们是否可以选择从typescript和angular而不是使用javascript代码来实现这一点？

<button #btn id="openModalButton" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" [hidden]="true">Open The Modal Box</button>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('btn') fileInput:ElementRef;
  OpenModalFun() {
      this.btn.nativeElement.click();
  }

  closeModalFun() {
      //Code to close modal pop-up
  }

}