Ngx-Bootstrap - Cảnh báo
Cảnh báo cung cấp các thông báo theo ngữ cảnh cho các hành động điển hình của người dùng như thông tin, lỗi với các thông báo cảnh báo có sẵn và linh hoạt.
AlertComponent
Hiển thị bảng nội dung có thể thu gọn để trình bày thông tin trong một lượng không gian hạn chế.
bộ chọn
alert,bs-alert
Đầu vào
dismissible - boolean, Nếu được đặt, hiển thị nút "Đóng" nội tuyến, mặc định: false
dismissOnTimeout- chuỗi | number, Number tính bằng mili giây, sau đó cảnh báo sẽ được đóng lại
isOpen - boolean, Cảnh báo hiển thị, mặc định: true
type- chuỗi, loại cảnh báo. Cung cấp một trong bốn lớp ngữ cảnh được hỗ trợ bootstrap: thành công, thông tin, cảnh báo và nguy hiểm, mặc định: cảnh báo
Kết quả đầu ra
onClose - Sự kiện này kích hoạt ngay sau khi phương thức close instance được gọi, $ event là một thể hiện của thành phần Alert.
onClosed - Sự kiện này kích hoạt khi cảnh báo đóng, sự kiện $ là một phiên bản của thành phần Cảnh báo
AlertConfig
Tính chất
dismissible - boolean, là cảnh báo có thể loại bỏ theo mặc định, mặc định: false
dismissOnTimeout - số, thời gian mặc định trước khi cảnh báo sẽ loại bỏ, mặc định: không xác định
type - chuỗi, loại cảnh báo mặc định, mặc định: cảnh báo
Thí dụ
Vì chúng tôi sẽ sử dụng cảnh báo, chúng tôi phải cập nhật app.module.ts được sử dụng trong chương ngx-bootstrap Accordion để sử dụngAlertModule và AlertConfig.
Cập nhật app.module.ts để sử dụng AlertModule và AlertConfig.
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';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
AccordionModule,
AlertModule
],
providers: [AlertConfig],
bootstrap: [AppComponent]
})
export class AppModule { }
Cập nhật test.component.html để sử dụng các cảnh báo.
test.component.html
<alert type="success"
[dismissible]="dismissible"
[isOpen]="open"
(onClosed)="log($event)"
[dismissOnTimeout]="timeout">
<h4 class="alert-heading">Well done!</h4>
<p>Success Message</p>
</alert>
<alert type="info">
<strong>Heads up!</strong> Info
</alert>
<alert type="warning">
<strong>Warning!</strong> Warning
</alert>
<alert type="danger">
<strong>Oh snap!</strong> Error
</alert>
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 {
open: boolean = true;
dismissible: boolean = true;
timeout: number = 10000;
constructor() { }
ngOnInit(): void {
}
log(alert){
console.log('alert message closed');
}
}
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.