Ngx-Bootstrap - Chú giải công cụ

Thành phần chú giải công cụ ngx-bootstrap cung cấp thành phần Chú giải công cụ dễ sử dụng và có thể cấu hình cao.

TooltipDirective

bộ chọn

[tooltip], [tooltipHtml]

Đầ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à chú giải công cụ sẽ được thêm vào.
containerClass - string, lớp Css cho vùng chứa chú giải công cụ.
delay - số, Độ trễ trước khi hiển thị chú giải công cụ.
isDisabled - boolean, Cho phép tắt chú giải công cụ.
isOpen - boolean, Trả về việc chú giải công cụ hiện đang được hiển thị hay không.
placement- chuỗi, Vị trí của chú giải công cụ. Chấp nhận: "top", "bottom", "left", "right".
tooltip- chuỗi | TemplateRef <any>, Nội dung được hiển thị dưới dạng chú giải công cụ.
tooltipAnimation - boolean, default: true.
tooltipAppendToBody - boolean.
tooltipClass - chuỗi.
tooltipContext - bất kỳ.
tooltipEnable - boolean.
tooltipFadeDuration - số, mặc định: 150.
tooltipHtml- chuỗi | TemplateRef <nhiều>.
tooltipIsOpen - boolean.
tooltipPlacement - chuỗi
tooltipPopupDelay - số
tooltipTrigger- chuỗi | chuỗi[]
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 chú giải công cụ bị ẩn.
onShown - Phát ra một sự kiện khi chú giải công cụ được hiển thị.
tooltipChange - Kích hoạt khi nội dung chú giải công cụ thay đổi.
tooltipStateChanged - Kích hoạt khi trạng thái chú giải công cụ thay đổi.

Thí dụ

Vì chúng ta sẽ sử dụng Tooltip, chúng ta phải cập nhật app.module.ts được sử dụng trong chương Ngx-bootstrap TimePicker để sử dụngTooltipModule.

Cập nhật app.module.ts để sử dụng TooltipModule.

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';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { TooltipModule  } from 'ngx-bootstrap/tooltip';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule,
      TimepickerModule.forRoot(),
      TooltipModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Cập nhật test.component.html để sử dụng thành phần bộ chọn thời gian.

test.component.html

<timepicker [(ngModel)]="time"></timepicker>
<pre class="alert alert-info">Time is: {{time}}</pre>

<timepicker [(ngModel)]="time" [showMeridian]="false"></timepicker>
<pre class="alert alert-info">Time is: {{time}}</pre>

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 {
   time: Date = new Date();
   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.