📌  相关文章
📜  如何使用Angular和Bootstrap打开弹出窗口？

📅  最后修改于: 2021-05-13 19:15:59             🧑  作者: Mango

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

ng add @ng-bootstrap/ng-bootstrap

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

句法：

  • 在打字稿文件中： 
    import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
  • 在html文件中： 
    
  ...

示例： modal-basic.ts 

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 


    

        

            Geeks of Geeks
        

        
    

    

        

            

                
                

                    
  
                    

                        
                    

                

            

        

    

    

        
    


  

输出：