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

【问题标题】：ng-bootstrap modal window is not working properlyng-bootstrap 模态窗口无法正常工作
【发布时间】：2018-03-06 06:23:52
【问题描述】：

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，但是当我点击我的“午餐演示模式”时，它没有提交格式正确。但所有按钮都可以正常工作。

【问题讨论】：

你在使用 ng2-bootstrap 吗？
不，我正在使用 mg-bootstrap
“格式不正确”是什么意思？
你面临 CSS 问题吗？
我不确定，这是我的代码链接

标签： angular ng-bootstrap

【解决方案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 之后将引导 css 代码添加到您的项目中。

【讨论】：