这就是我使用 Angular 5 和 ng-bootstrap 的方法。按如下方式创建模态组件:
import { Component, OnInit } from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'sm-create-asset-modal',
templateUrl: './create-asset-modal.component.html',
styleUrls: ['./create-asset-modal.component.css']
})
export class CreateAssetModalComponent implements OnInit {
constructor(public activeModal: NgbActiveModal) { }
ngOnInit() {
}
}
模板将类似于:
<div class="modal-header">
<h4 class="modal-title">Create New </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>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" (click)="activeModal.close('Close click')">Create</button>
</div>
在要打开模态的组件中添加 NgbModal 类型的变量并调用 open,如下所示:
export class MyComponent {
constructor(private modal: NgbModal) {}
onClick() {
this.modal.open(CreateAssetModalComponent);
}
}
在声明 CreateAssetModalComponent 的 NgModule 中,将组件添加到entryComponents 数组中,如下所示:
@NgModule({
imports: [...],
declarations: [CreateAssetModalComponent],
entryComponents: [CreateAssetModalComponent]
})
假设您导入了其他模块(例如 NgbModule),这应该可以工作。