Bootstrap 模式不会在 Angular 8 中弹出

Question

我以前使用过模态，从来没有遇到过这样的问题。 我的引导模式没有弹出。 但是，它显示在页面底部，而我希望它像模态一样弹出。

我的html：

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

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      <p>One fine body&hellip;</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
    </div>
 </ng-template>

我的.ts：

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent {

  constructor(private modalService: NgbModal) { }

  open(content) {
    this.modalService.open(content);
  }
}

app.module 中的导入当然包含 NgbModule

imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    NgbModule
  ],

这是我的 package.json （抱歉它没有格式化为代码，stackoverflow 不允许我粘贴这么多代码）：

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build --prod --output-path ../expenses/wwwroot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.13",
    "@angular/common": "~8.2.13",
    "@angular/compiler": "~8.2.13",
    "@angular/core": "~8.2.13",
    "@angular/forms": "~8.2.13",
    "@angular/platform-browser": "~8.2.13",
    "@angular/platform-browser-dynamic": "~8.2.13",
    "@angular/router": "~8.2.13",
    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.21",
    "@angular/cli": "~8.3.17",
    "@angular/compiler-cli": "~8.2.13",
    "@angular/language-service": "~8.2.13",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "bootstrap": "^4.4.1",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Answer 1

好吧，经过数小时的寻找解决方案后，我发现是的，Bootstrap 版本与 Angular 版本不兼容。 我不得不使用 ngx-bootstrap 库，它就像一个魅力。 非常感谢这篇文章解决了我的问题。

Answer 2

在您的应用程序模块导入部分添加

NgbModule.forRoot()

而不仅仅是 NgbModule。 还要确保 ng-bootstrap 版本与 angular 版本兼容。