我正在使用ng-bootstrap Here尝试做一个模态样本,但是当我点击打开模态时它虽然存在于DOM中但它不会出现 .
我的角度核心版本:4.0.0,@ ng-bootstrap / ng-bootstrap:1.0.0-alpha.29,bootstrap:3.3.7
测试modal.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>
测试modal.component.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>
1 回答
我认为问题可能是你的bootstrap版本
bootstrap :3.3.7
,当我到达主页时它说它是Bootstrap 4(它还说启动时的bootstrap 4) .在Angular 4 Bootstrap 4项目中进行测试,我得到了它的工作
在
package.json
在我的模块中
在一个组件中: