Ngx-Bootstrap - Peringatan

Lansiran memberikan pesan kontekstual untuk tindakan pengguna biasa seperti info, kesalahan dengan pesan peringatan yang tersedia dan fleksibel.

AlertComponent

Menampilkan panel konten yang dapat diciutkan untuk menyajikan informasi dalam ruang terbatas.

pemilih

  • alert,bs-alert

Masukan

  • dismissible - boolean, Jika disetel, menampilkan tombol "Tutup" sebaris, default: salah

  • dismissOnTimeout- string | angka, Angka dalam milidetik, setelah itu peringatan akan ditutup

  • isOpen - boolean, Apakah peringatan terlihat, default: benar

  • type- string, tipe peringatan. Menyediakan salah satu dari empat kelas kontekstual yang didukung bootstrap: keberhasilan, info, peringatan dan bahaya, default: peringatan

Keluaran

  • onClose - Peristiwa ini dijalankan segera setelah metode contoh dekat dipanggil, $ event adalah turunan dari komponen Alert.

  • onClosed - Acara ini aktif saat peringatan ditutup, $ acara adalah turunan dari komponen Peringatan

AlertConfig

Properti

  • dismissible - boolean, apakah peringatan dapat ditutup secara default, default: false

  • dismissOnTimeout - angka, waktu default sebelum peringatan akan ditutup, default: tidak ditentukan

  • type - string, tipe peringatan default, default: peringatan

Contoh

Karena kami akan menggunakan peringatan, Kami telah memperbarui app.module.ts yang digunakan dalam bab Accordion ngx-bootstrap untuk digunakan.AlertModule dan AlertConfig.

Perbarui app.module.ts untuk menggunakan AlertModule dan 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 { }

Perbarui test.component.html untuk menggunakan peringatan.

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>

Perbarui test.component.ts untuk variabel dan metode yang sesuai.

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');
   }
}

Bangun dan Sajikan

Jalankan perintah berikut untuk memulai server sudut.

ng serve

Setelah server aktif dan berjalan. Buka http: // localhost: 4200 dan verifikasi keluaran berikut.