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ụngAlertModuleAlertConfig.

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.