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

Question

我无法使用 Typescript 切换引导模式。我正在使用默认的引导程序 4 模态。这是代码。

<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()装饰器获取组件中modal的引用，然后使用它与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 的步骤here.

如果.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 sign里面 组件：

   // 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 并使用此 plunk 查看一个实时示例：http://plnkr.co/edit/vAsduJNgB0x6fWPQudQD?p=preview