Ngx-Bootstrap - Popover

Thành phần cửa sổ bật lên ngx-bootstrap cung cấp một thành phần lớp phủ nhỏ để cung cấp thông tin nhỏ về một thành phần.

PopoverDirective

bộ chọn

popover

Đầu vào

adaptivePosition - boolean, đặt vô hiệu hóa vị trí thích ứng.
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.
containerClass - string, lớp Css cho vùng chứa cửa sổ bật lên
delay - số, Độ trễ trước khi hiển thị chú giải công cụ
isOpen - boolean, Trả về việc cửa sổ bật lên hiện đang được hiển thị hay không
outsideClick - boolean, Đóng cửa sổ bật lên khi nhấp chuột bên ngoài, mặc định: false
placement- "đầu" | "dưới cùng" | "trái" | "đúng" | "tự động" | "trên cùng bên trái" | "trên cùng bên phải" | "đầu bên phải" | "phía dưới bên phải" | "dưới cùng bên phải" | "dưới cùng bên trái" | "phía dưới bên trái" | "trên cùng bên trái", Vị trí của cửa sổ bật lên. Chấp nhận: "top", "bottom", "left", "right".
popover- chuỗi | TemplateRef <any>, Nội dung được hiển thị dưới dạng cửa sổ bật lên.
popoverContext - bất kỳ, Ngữ cảnh sẽ được sử dụng nếu cửa sổ bật lên là một mẫu.
popoverTitle - chuỗi, Tiêu đề của một cửa sổ bật lên.
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

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

setAriaDescribedBy() - Đặt thuộc tính aria-descriptionBy cho chỉ thị phần tử và đặt id cho cửa sổ bật lên.
show()- Mở cửa sổ bật lên của một phần tử. Đây được coi là một "thủ công" kích hoạt 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à một "thủ công" kích hoạt 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à một "thủ công" kích hoạt cửa sổ bật lên.

Thí dụ

Vì chúng ta sẽ sử dụng một cửa sổ bật lên, Chúng ta phải cập nhật app.module.ts được sử dụng trong chương Ngx-bootstrap Phân trang để sử dụngPopoverModule và PopoverConfig.

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

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';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';

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

Cập nhật test.component.html để sử dụng phương thức.

test.component.html

<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint." [outsideClick]="true">
   Default Popover
</button>
<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint."
   popoverTitle="Tutorialspoint" 
   [outsideClick]="true"
   placement="right">
   Right Aligned popover
</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';
import { BsModalService } from 'ngx-bootstrap/modal';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@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. Nhấp vào nút Mở phương thức và xác minh kết quả sau.