如何使用Angular和Bootstrap打开弹出窗口？

将Bootstrap添加到Angular应用程序是一个简单的过程。只需在Angular CLI中编写以下命令即可。它将引导程序添加到你的node_modules文件夹中。

ng add @ng-bootstrap/ng-bootstrap

方法：在相应组件的TypeScript文件中导入NgbModal模块, 然后我们必须在相应组件的HTML文件中使用上述模块为弹出模型编写代码。

语法如下：

• 在打字稿文件中：

  import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
  

• 在html文件中：

  <ng-template #content let-modal>
    ...
  </ng-template>
  

例子：基本情态

import {Component} from '@angular/core' ;
  
import {NgbModal, ModalDismissReasons} 
       from '@ng-bootstrap/ng-bootstrap' ;
  
@Component({
   selector: 'ngbd-modal-basic' , templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
   closeResult = '' ;
  
   constructor(private modalService: NgbModal) {}
  
   open(content) {
     this .modalService.open(content, {ariaLabelledBy: 'modal-basic-title' }).result.then((result) 
       => {
       this .closeResult = `Closed with : ${result}`;
     }, (reason) => {
       this .closeResult = 
          `Dismissed ${ this .getDismissReason(reason)}`;
     });
   }
  
   private getDismissReason(reason: any): string {
     if (reason === ModalDismissReasons.ESC) {
       return 'by pressing ESC' ;
     } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
       return 'by clicking on a backdrop' ;
     } else {
       return ` with : ${reason}`;
     }
   }
}

现在, 我们必须使用ng-template来构建将创建弹出窗口的模型。

例子： modal-basic.html

< ng-template #content let-modal>
     < div class = "modal-header" >
         < h4 class = "modal-title" 
             id = "modal-basic-title" >
             Geeks of Geeks
         </ h4 >
         < button type = "button" class = "close"
                 aria-label = "Close" (click)=
                 "modal.dismiss('Cross click')">
  
             < span aria-hidden = "true" >
                 ×
             </ span >
         </ button >
     </ div >
     < div class = "modal-body" >
         < form >
             < div class = "form-group" >
                 < label for = "dateOfBirth" >
                     Date of birth
                 </ label >
                 < div class = "input-group" >
                     < input id = "dateOfBirth" 
                         class = "form-control" 
                         placeholder = "yyyy-mm-dd" 
                         name = "dp" ngbDatepicker
                         # dp = "ngbDatepicker" >
  
                     < div class = "input-group-append" >
                         < button class="btn 
                             btn-outline-secondary calendar"
                             (click)="dp.toggle()"
                             type = "button" >
                         </ button >
                     </ div >
                 </ div >
             </ div >
         </ form >
     </ div >
     < div class = "modal-footer" >
         < button type = "button" 
             class = "btn btn-outline-dark" 
             (click)="modal.close('Save click')">
             Save
         </ button >
     </ div >
</ ng-template >
  
< button class = "btn btn-lg btn-outline-primary" 
     (click)="open(content)">
     Popup using Angular and Bootstrap
</ button >

输出如下：

---