在Angular 6中,可以使用ngx-bootstrap库来创建下拉列表和对话框。
首先,安装ngx-bootstrap库:
npm install ngx-bootstrap --save
然后,在你的模块中导入所需的组件和模块:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
BrowserAnimationsModule,
BsDropdownModule.forRoot(),
ModalModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
然后,在你的组件中,创建一个下拉列表和一个对话框:
下拉列表选择项
对话框内容
你选择了: {{ selectedOption }}
最后,在你的组件类中,处理下拉列表的选择事件,并打开对话框:
import { Component, ViewChild } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'app-root',
template: `...` // 指向上面的HTML模板
})
export class AppComponent {
options = ['选项1', '选项2', '选项3'];
selectedOption: string;
dialogOpened = false;
@ViewChild('dialog') dialog: BsModalRef;
constructor(private modalService: BsModalService) {}
openDialog(option: string) {
this.selectedOption = option;
this.dialogOpened = true;
this.modalService.show(this.dialog);
}
closeDialog() {
this.dialogOpened = false;
this.dialog.hide();
}
}
以上代码演示了如何根据下拉列表中的选定值打开对话框。当选择一个选项时,将选项的值存储在selectedOption
变量中,并将dialogOpened
变量设置为true
,然后使用modalService.show()
方法打开对话框。关闭对话框时,将dialogOpened
变量设置为false
,并使用dialog.hide()
方法关闭对话框。