angular2 ngbootstrap 模态框用法

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">&times;</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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!