如何使用Angular和Bootstrap打开弹出窗口（） _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 >

【如何使用Angular和Bootstrap打开弹出窗口（）】输出如下：