在Angular中,可以使用ngx-bootstrap库来实现模态框下方出现下拉菜单的功能。以下是一个示例代码:
npm install ngx-bootstrap --save
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@NgModule({
imports: [
// ...
BsDropdownModule.forRoot()
],
// ...
})
export class AppModule { }
import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'app-modal-example',
templateUrl: './modal-example.component.html'
})
export class ModalExampleComponent {
modalRef: BsModalRef;
constructor(private modalService: BsModalService) { }
openModal(template: TemplateRef) {
this.modalRef = this.modalService.show(template);
}
}
Modal Title
在以上代码中,我们使用了ngx-bootstrap库中的BsModalService和BsModalRef来管理模态框的打开和关闭。模态框的内容中包含了一个下拉菜单,使用了Bootstrap的dropdown样式。点击"Open Modal"按钮将会打开模态框,模态框中会显示一个带有下拉菜单的内容。
请注意,在使用ngx-bootstrap的模态框和下拉菜单之前,你需要确保已经正确地引入了Bootstrap样式表。