jquery bootstrap 4 打字稿。使用 jquery 关闭模式不起作用

Question

我正在尝试使用 jquery 在打字稿代码中关闭 Angular 项目的引导模式。

代码：

html中的函数调用：

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

createSaved 和 createProp 是 modals 上的本地引用

它们在模态框上：

<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>

....

以及我打字稿中的代码

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>

打字稿文件，

$('#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