import {Component, ViewEncapsulation} from "@angular/core"; import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'model-test', encapsulation: ViewEncapsulation.None, styles: [` .dark-modal .modal-content { background-color: #2b669a; color: white; } `], templateUrl: './model.component.html' }) export class ModelTestComponent { username: string; password: string; model: any; constructor(private modalService: NgbModal) {} open(content) { this.model = this.modalService.open(content, { windowClass: 'dark-modal',size: 'lg'}); } submit() { this.model.close(); } }
<template ngbModalContainer></template> <template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> let-c="close" let-d="dismiss" 输入用户名:<input class="form-control" [(ngModel)]="username"> 输入密码:<input type="password" class="form-control" [(ngModel)]="password"> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" (click)="submit()">提交</button> <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button> </div> </template> <button class="btn btn-lg btn-outline-primary" (click)="open(content)">打开模态框</button>