问题描述: 在Angular 6中,使用bootstrap的多选项目时,点击选项会触发两次。
解决方法:
在组件文件中,实现onOptionClick()方法,阻止事件冒泡:
onOptionClick(event: Event) {
event.stopPropagation();
// 处理选项点击事件
}
首先,安装ng-bootstrap库:
npm install @ng-bootstrap/ng-bootstrap
然后,在模块文件中导入NgbdDropdownModule:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, NgbModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
最后,使用ngbDropdown指令替换原来的bootstrap dropdown组件:
这样,点击选项时只会触发一次事件。