Ngx-Bootstrap - 下拉菜单

ngx-bootstrap 下拉组件是可切换的，并提供上下文覆盖来显示链接列表等。通过下拉指令，我们可以使下拉菜单具有交互性。

BsDropdown指令

选择器

  • [bsDropdown],[下拉]

输入

  • autoClose - 布尔值，表示单击项目或文档时以及按 ESC 键后将关闭下拉列表

  • 容器- 字符串，指定弹出框应附加到的元素的选择器。

  • dropup - 布尔值，该属性指示下拉菜单应向上打开。

  • insideClick - 布尔值，此属性指示当 autoClose 设置为 true 时，下拉列表不应在内部单击时关闭。

  • isAnimated - 布尔值，表示下拉列表将被动画化

  • isDisabled - 布尔值，禁用下拉菜单切换并隐藏下拉菜单（如果打开）

  • isOpen - 布尔值，返回当前是否显示弹出窗口

  • placement - 字符串，弹出框的位置。接受：“上”、“下”、“左”、“右”

  • 触发器- 字符串，指定应触发的事件。支持空格分隔的事件名称列表。

输出

  • isOpenChange - 当 isOpen 更改时发出事件

  • onHidden - 隐藏弹出窗口时发出事件

  • onShown - 显示弹出窗口时发出事件

方法

  • show() - 打开元素的弹出窗口。这被认为是弹出窗口的“手动”触发。

  • hide() - 关闭元素的弹出窗口。这被认为是弹出窗口的“手动”触发。

  • toggle() - 切换元素的弹出框。这被认为是弹出窗口的“手动”触发。

  • setConfig() - 设置弹出窗口的配置

例子

由于我们将使用下拉菜单，因此我们必须更新ngx-bootstrap DatePicker章节中使用的 app.module.ts 以使用BsDropdownModule和BsDropdownConfig。

更新 app.module.ts 以使用 BsDropdownModule 和 BsDropdownConfig。

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule
   ],
   providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用下拉菜单。

测试.component.html

<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false">
   <button id="button-basic" dropdownToggle type="button" 
      class="btn btn-primary dropdown-toggle"
      aria-controls="dropdown-basic">
      Menu <span class="caret"></span>
   </button>
   <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-basic">
      <li role="menuitem"><a class="dropdown-item" href="#">File</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Edit</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Search</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Recents</a>
      </li>
   </ul>
</div>
<button type="button" class="btn btn-primary" 
   (click)="dropdown.isOpen = !dropdown.isOpen">Show/Hide
</button>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   constructor() {}

   ngOnInit(): void {}
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。

落下