Ngx-Bootstrap - Chế độ
Thành phần phương thức ngx-bootstrap là một lời nhắc hộp thoại linh hoạt và có thể cấu hình cao, cung cấp nhiều giá trị mặc định và có thể được sử dụng với mã tối thiểu.
ModalDirective
bộ chọn
[bsModal]
Đầu vào
config - ModalOptions, cho phép thiết lập cấu hình phương thức thông qua thuộc tính phần tử
Kết quả đầu ra
onHidden - Sự kiện này được kích hoạt khi phương thức hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).
onHide - Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn thể hiện đã được gọi.
onShow - Sự kiện này kích hoạt ngay lập tức khi phương thức thể hiện show được gọi.
onShown - Sự kiện này được kích hoạt khi phương thức đã được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).
Phương pháp
show() - Cho phép mở phương thức thủ công.
hide() - Cho phép đóng phương thức thủ công.
toggle() - Cho phép chuyển đổi chế độ hiển thị theo cách thủ công.
showElement() - Hiển thị hộp thoại.
focusOtherModal() - Thủ thuật sự kiện.
Thí dụ
Vì chúng ta sẽ sử dụng một phương thức, Chúng ta phải cập nhật app.module.ts được sử dụng trong chương Ngx-bootstrap Dropdowns để sử dụngModalModule và BsModalService.
Cập nhật app.module.ts để sử dụng ModalModule và BsModalService.
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 { ModalModule, BsModalService } from 'ngx-bootstrap/modal';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
AccordionModule,
AlertModule,
ButtonsModule,
FormsModule,
CarouselModule,
CollapseModule,
BsDatepickerModule.forRoot(),
BsDropdownModule,
ModalModule
],
providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig,BsModalService],
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-primary" (click)="openModal(template)">Open modal</button>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a sample modal dialog box.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button>
</div>
</ng-template>
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, TemplateRef } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
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.