javascript - 如何通过单击父项中的按钮打开子项中的引导程序 5 模态，而不以角度安装 ng bootstrap

Question

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

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

我该如何实现这一点。

标签： javascriptangulartypescripttwitter-bootstrapmodal-dialog

Answer 1

进一步安装引导程序，安装@types/bootstrap

npm install --save @types/bootstrap

然后你可以使用 typeScript 控制 Modal。例如

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

由于您的孩子拥有模态，因此请在孩子中使用模板引用变量（例如#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();
  }

堆栈闪电战