我正在使用 ng-bootstrap Here尝试做一个模态示例,但是当我单击“打开模态”时,它不会出现,尽管它存在于 DOM 内部。
我的 Angular 核心版本:4.0.0,@ng-bootstrap/ng-bootstrap:1.0.0-alpha.29,bootstrap:3.3.7
测试模态.component.html
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>
测试模态.组件.ts
import {Component,Input} from '@angular/core';
import {NgbModal,NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-test-modal',
templateUrl: './test-modal.component.html',
styleUrls: ['./test-modal.component.css']
})
export class TestModalComponent {
@Input() name;
constructor(public activeModal: NgbActiveModal) {}
}
app.component.ts 中带有构造函数的 open 函数
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(TestModalComponent);
}
app.component.html 内的按钮
<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>
最佳答案
我认为问题可能是你的 Bootstrap 版本 bootstrap :3.3.7
,当我进入主页时,它说它适用于 Bootstrap 4(在开始时也显示 bootstrap 4)。
在 Angular 4 + Bootstrap 4 项目中进行测试,我让它工作了
在package.json
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29",
"bootstrap": "^4.0.0-alpha.6",
在我的模块中
imports: [
NgbModule.forRoot(), ...
],
entryComponents: [ModalTemplateComponent],
在组件中:
modal: NgbModalRef;
constructor(private modalService: NgbModal) { }
async open() {
this.modal = this.modalService.open(ModalTemplateComponent);
const result = await this.modal.result;
console.log(result);
}
关于javascript - 模态未正确显示 Angular 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45338735/