Ngx-Bootstrap - Trình đơn thả xuống

Thành phần thả xuống ngx-bootstrap có thể chuyển đổi và cung cấp lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết, v.v. Với các lệnh thả xuống, chúng tôi có thể làm cho các danh sách thả xuống tương tác.

BsDropdownDirective

bộ chọn

[bsDropdown],[dropdown]

Đầu vào

autoClose - boolean, Cho biết menu thả xuống sẽ được đóng khi nhấp vào mục hoặc tài liệu và sau khi nhấn ESC
container - string, Một bộ chọn chỉ định phần tử mà cửa sổ bật lên sẽ được thêm vào.
dropup - boolean, Thuộc tính này chỉ ra rằng menu thả xuống nên được mở lên trên.
insideClick - boolean, Thuộc tính này chỉ ra rằng menu thả xuống sẽ không đóng khi nhấp chuột bên trong khi autoClose được đặt thành true.
isAnimated - boolean, Cho biết menu thả xuống sẽ được làm động
isDisabled - boolean, Tắt chuyển đổi thả xuống và ẩn menu thả xuống nếu được mở
isOpen - boolean, Trả về việc cửa sổ bật lên hiện đang được hiển thị hay không
placement- chuỗi, Vị trí của một cửa sổ bật lên. Chấp nhận: "top", "bottom", "left", "right"
triggers- string, Chỉ định các sự kiện sẽ kích hoạt. Hỗ trợ danh sách tên sự kiện được phân tách bằng dấu cách.

Kết quả đầu ra

isOpenChange - Phát ra một sự kiện khi thay đổi isOpen
onHidden - Phát ra một sự kiện khi cửa sổ bật lên bị ẩn
onShown - Phát ra một sự kiện khi cửa sổ bật lên được hiển thị

Phương pháp

show()- Mở cửa sổ bật lên của một phần tử. Đây được coi là cách kích hoạt 'thủ công' của cửa sổ bật lên.
hide()- Đóng cửa sổ bật lên của một phần tử. Đây được coi là cách kích hoạt 'thủ công' của cửa sổ bật lên.
toggle()- Chuyển đổi cửa sổ bật lên của một phần tử. Đây được coi là cách kích hoạt 'thủ công' của cửa sổ bật lên.
setConfig() - Đặt cấu hình cho cửa sổ bật lên

Thí dụ

Vì chúng tôi sẽ sử dụng trình đơn thả xuống, chúng tôi phải cập nhật app.module.ts được sử dụng trong chương ngx-bootstrap DatePicker để sử dụngBsDropdownModule và BsDropdownConfig.

Cập nhật app.module.ts để sử dụng BsDropdownModule và BsDropdownConfig.

app.module.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 { }

Cập nhật test.component.html để sử dụng trình đơn thả xuống.

test.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>

Cập nhật test.component.ts cho các biến và phương thức tương ứng.

test.component.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 {}
}

Xây dựng và Phục vụ

Chạy lệnh sau để khởi động máy chủ góc.

ng serve

Sau khi máy chủ hoạt động. Mở http: // localhost: 4200 và xác minh kết quả sau.