此外，要安装引导，请安装@types/bootstrap

npm install --save @types/bootstrap

然后，您可以使用typescript控制模态。例如

<!--in the button I use template reference-->
  <button type="button" class="btn btn-primary" (click)="show(modal)">
    Launch demo modal
  </button>
<!--see the template reference-->
<div #modal class="modal fade" tabindex="-1" >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
   </div>
</div>

和in.ts

import {Modal} from 'bootstrap' //<--import Modal

  show(modalElement){
    const modal=new Modal(modalElement);
    modal.show();
  }

或者使用viewchild

@ViewChild('modal') modalRef
  show(){
    //see that using ViewChildren you use nativeElement
    const modal=new Modal(this.modalRef.nativeElement);
    modal.show();
  }

由于您的孩子具有模态，请在孩子中使用模板引用变量（例如。 #modal )所以你可以做父母

<button type="button" (click)="show(child.modal)">
    Launch demo modal
  </button>
  <child #child></child>

  //in this case we need use "nativElement"
  show(modalRef){
    const modal=new Modal(modalRef.nativeElement);
    modal.show();
  }

lightning 战