Question

app.component.html

<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross 
 click')">
  <span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
    <p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close 
 click')">Close</button>
</div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" 
 (click)="open(content)">Launch demo modal</button>

 <hr>

<pre>{{closeResult}}</pre>

app.component.ts

import { Component } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
closeResult: string;

constructor(private modalService: NgbModal) {}

open(content) {
this.modalService.open(content).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}`;
}
}
}

我已经在app.component.html中创建了我的模态窗口，我已经安装了npm install --save @ ng-bootstrap / ng-bootstrap，但是当我点击我的＆＃34;午餐演示模式＆＃34;它没有以正确的格式提交。但是所有按钮都正常工作。

Answer 1

将此行添加到index.html

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

或者在link之后将bootstrap css代码添加到您的项目中。

ng-bootstrap模态窗口无法正常工作

1 个答案: