如何通过单击父项中的按钮打开子项中的 bootstrap 5 模式，而无需在 angular 中安装 ng bootstrap

Question

我在父组件中有一个按钮，单击它后我想打开一个在子组件中的模式。我在我的项目中使用 bootstrap 5。由于某些限制，我不想安装 ngx-bootstrap。

当我将 data-bs-target 和 data-bs-toggle 属性添加到按钮并具有 <child></child> 时它正在工作父组件中的实例。但是，在打开模块之前，我需要做一些验证。

我该如何实现。

Answer 1

进一步安装bootstrap，安装@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>

并且在 .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();
  }

因为你的 child 是有模态的，所以在 children 中使用模板引用变量（例如 #modal）所以你 parent 可以是

  <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();
  }

stackblitz

如何通过单击父项中的按钮打开子项中的 bootstrap 5 模式，而无需在 angular 中安装 ng bootstrap

How to open a bootstrap 5 modal which is in child from a button click which is in parent , without installing ng bootstrap in angular

javascript

modal-dialog

twitter-bootstrap

typescript

angular