如何使用Angular2 Component/Typescript切换bootstrap 4模态

Question

我无法使用Typescript切换bootstrap模式.我正在使用默认的bootstrap 4 Modal.这是代码.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这是一个Bootstrap 4提供的按钮来切换模态

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

我没有在我的应用程序中使用此按钮.我想通过我的一个Angular 2组件中的函数来显示Modal.我使用以下代码访问了html元素.

  ngOnInit() {
    this.modalElement = document.getElementById('myModal');
  }

现在我需要激活模态以使用方法调用来显示它.我不打算找到解决办法.我尝试了像.show()和其他解决方案这样的方法,但都没有.

Answer 1

你可以使用@ViewChild()装饰器来获取组件中模态的引用,然后使用它与jQuery调用.modal()方法从函数内打开模型.

在模板中声明任何局部变量,例如#myModal.

<div #myModal class="modal fade" id="myModal" tabindex="-1" role="dialog" 
  aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

使用@ViewChild()装饰器在组件中使用它.

import { ViewChild } from '@angular/core';
import { ElementRef } from '@angular/core';
@Component({
  ...
})
export class YourComponent {
  @ViewChild('myModal') myModal:ElementRef;

   yourFunction(){
     //open modal using jQuery
     jQuery(this.myModal.nativeElement).modal('show'); 
   }
}

你可以在这里找到在项目中包含jQuery的步骤.

如果.modal()方法给出错误说.modal()不是函数,只需jQuery在组件文件中声明一个变量,如下所示.

declare var jQuery:any;

@Component({
 ...
})
export class YourComponent{
 ...
}

Answer 2

3 步骤切换（显示或隐藏）引导模式：

1. 添加 ViewChild以访问模式，如下面的代码：

   提示：注意第一行代码中的#modal：

   <div class="modal fade" #modal>
       <div class="modal-dialog">
           <div class="modal-content">
               <form>
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                       <header class="font-12 bold">Modal Header</header>
                   </div>
                   <div class="modal-body">
                       Your Content ...
                   </div>
                   <div class="modal-footer">
                       <button type="submit" class="btn btn-primary">Save</button>
                       <button type="button" class="btn btn-danger" data-dismiss="modal">close</button>
                   </div>
               </form>
           </div>
       </div>
   </div>
   

2. 添加用于在 html 中显示模态的按钮：

   提示：注意(click)="showModal()"：

   <button type="button" class="btn btn-primary" (click)="showModal()">Show Modal</button>
   

3. 在您的组件中，输入以下代码：

   提示：注意showModal 函数和访问组件内部的jquery 标志：

   // jQuery Sign $
   declare let $: any;
   
   @Component({
       ...
   })
   export class YourComponent {
       @ViewChild('modal') modal:ElementRef;
   
       showModal(){
           // Show modal with jquery
           $(this.modal.nativeElement).modal('show'); 
       }
   }
   

Answer 3

我建议使用专用库,为Angular 2+提供无缝的Bootstrap 4集成.ng-bootstrap具有出色的模态实现,其中打开包含组件内容的模式归结为:

 @Component({
  selector: 'ngbd-modal-component',
  templateUrl: './modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(MyContent);
  }
}

你可以在这里阅读完整的文档:https://ng-bootstrap.github.io/#/components/modal并查看这个插件的实例:http://plnkr.co/edit/vAsduJNgB0x6fWPQudQD？p = preview