Ngx-Bootstrap - Avvisi
Avvisi fornisce messaggi contestuali per azioni tipiche dell'utente come informazioni, errori con messaggi di avviso disponibili e flessibili.
AlertComponent
Visualizza pannelli di contenuto comprimibili per presentare le informazioni in uno spazio limitato.
selettore
alert,bs-alert
Ingressi
dismissible - booleano, se impostato, visualizza un pulsante "Chiudi" in linea, predefinito: false
dismissOnTimeout- stringa | numero, numero in millisecondi, dopodiché l'avviso verrà chiuso
isOpen - booleano, è visibile l'avviso, predefinito: vero
type- stringa, tipo di avviso. Fornisce una delle quattro classi contestuali supportate da bootstrap: successo, informazioni, avviso e pericolo, impostazione predefinita: avviso
Uscite
onClose - Questo evento si attiva immediatamente dopo la chiamata del metodo di istanza di chiusura, $ event è un'istanza del componente Alert.
onClosed - Questo evento si attiva alla chiusura dell'avviso, $ event è un'istanza del componente Alert
AlertConfig
Proprietà
dismissible - booleano, gli avvisi sono ignorabili per impostazione predefinita, impostazione predefinita: false
dismissOnTimeout - numero, tempo predefinito prima che l'avviso venga chiuso, valore predefinito: non definito
type - stringa, tipo di avviso predefinito, predefinito: avviso
Esempio
Poiché utilizzeremo gli avvisi, dobbiamo aggiornare app.module.ts utilizzato nel capitolo ngx-bootstrap Accordion da utilizzareAlertModule e AlertConfig.
Aggiorna app.module.ts per utilizzare AlertModule e 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 { }
Aggiorna test.component.html per utilizzare gli avvisi.
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>
Aggiorna test.component.ts per le variabili e i metodi corrispondenti.
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');
}
}
Costruisci e servi
Eseguire il seguente comando per avviare il server angolare.
ng serve
Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.