javascript - jquery bootstrap 4 typescript 。使用 jquery 关闭模态不工作

Question

我正在尝试使用 jquery 关闭 typescript 代码中 Angular 项目的 Bootstrap 模式。

代码:

html 中的函数调用:

(click)="populaterfpfromsaved(i, createSaved, createProp )"

createSaved 和 createProp 是模态框的本地引用

这里是模态框:

<ng-template #createProp let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Request For Proposal</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

....

<ng-template class="mw-100 w-75" #createSaved let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Saved RFPs</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body table-responsive">
    <table class="table table-hover">
      <thead>

....

和我 typescript 中的代码

populaterfpfromsaved(index, create, prop){
    console.log('it fired to open the rfp modal');
    const scoperfp = this.savedrfps[index];
    this.savedevent.name = scoperfp.eventname;
    this.savedevent.date = scoperfp.datename;
    this.savedevent.programdate = scoperfp.datevalue;
    this.savedevent.dateflex = scoperfp.dateflex;
    this.savedevent.eventpurpose = scoperfp.eventpurpose;
    this.savedevent.starttime = scoperfp.startime;
    this.savedevent.starttimeflex = scoperfp.starttimeflex;
    this.savedevent.endtime = scoperfp.endtime;
    this.savedevent.endtimeflex = scoperfp.endtimeflex;
    this.savedevent.headcount = scoperfp.headcount;
    this.savedevent.eventdetails = scoperfp.eventdetails;
    (<any>jQuery(create)).modal('hide');
    (<any>jQuery(prop)).modal('show');


  }

但是模态没有改变。

是不是我没设置好

Answer 1

像这样更改它可能对您有用，让我们尝试一次。

更改您的 html 文件，

<ng-template #createProp let-c="close" let-d="dismiss">

到<div class="modal" id='createProp'></div>

typescript 文件，

$('#createProp').modal('toggle');

在您想关闭模式的任何地方使用上面的行。

确保你已经在你的应用程序中包含了 jquery 插件并声明了变量

declare var $: any;

Angular .cli.json

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

更多引用，

Close Bootstrap Modal https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176