angular - Bootstrap 模态不会在 Angular 8 中弹出
问题描述
我以前使用过模态,从来没有遇到过这样的问题。我的引导模式没有弹出。但是,它显示在页面底部,而我希望它像模态一样弹出。
我的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…</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 中的 Imports 当然包含 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"
}
}
解决方案
好吧,在寻找解决方案数小时后,我发现是的,Bootstrap 版本与 Angular 版本不兼容。我不得不使用像魅力一样工作的 ngx-bootstrap 库。非常感谢这篇文章解决了我的问题。
推荐阅读
- filter - 新4j。节点上具有多个过滤器的动态查询
- google-tag-manager - Google 跟踪代码管理器 - 使用自定义 HTML 的 event.preventdaulft
- php - 在 Axios 请求 laravel auth attemp session 部分不起作用
- javascript - React 本机方法未定义
- android - 显示字符串中的图像和文本并将其显示在文本视图中
- typescript - 如何为DefiniteTyped 编写React Native 库的测试?
- python - 使用 Python 进行计数的最常见句子提取
- accumulo - Accumulo 迭代器未被调用
- javascript - Javascript 功能不适用于所有浏览器
- python - 使用 numpy 数组替换 pandas DataFrame 值