Come utilizzare le notifiche di avviso (Toastr) in Angular 9
Questo articolo fornirà un esempio di come utilizzare il tostapane in Angular 9. Vorrei mostrarti Angular 9 - notifiche di avviso (toastr). Questo esempio ti aiuterà a creare un avviso di tostapane in Angular 9. Questo articolo approfondisce l'avviso di tostapane Angular 9. Qui, Creazione di un esempio di base di avviso di tostapane Angular 9.
Useremo il pacchetto ngx-toastr npm per la notifica di toastr nell'applicazione angular 9. abbiamo bisogno di installare due pacchetti npm ngx-toastr e @angular/animations che forniscono messaggi di successo, errore, avviso e avviso di informazioni.
come cambiare la password di msn
Ti darò un esempio molto semplice e passo dopo passo in modo da poter implementare facilmente la notifica del tostapane nella tua applicazione angolare 9. puoi vedere anche l'anteprima qui sotto per l'avviso.
Passaggio 1: crea una nuova app
Puoi facilmente creare la tua app angolare 9 usando il comando qui sotto:
ng new my-new-app Passaggio 2: installa Toastr
In questo passaggio, installeremo i pacchetti ngx-toastr e @angular/animations npm. quindi eseguiamo entrambi i comandi come di seguito:
npm install ngx-toastr --save npm install @angular/animations --save Ora, dobbiamo includere toastr css come node_modules/ngx-toastr/toastr.css, quindi aggiungiamolo al file angular.json.
angular.json
..... 'styles': [ 'node_modules/ngx-toastr/toastr.css', 'src/styles.css' ], ..... Passaggio 3: modulo di importazione
In questo passaggio, dobbiamo importare ToastrModule e BrowserAnimationsModule nel file app.module.ts. quindi importiamolo come di seguito:
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ToastrModule } from 'ngx-toastr'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, ToastrModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Passaggio 4: creare un servizio per la notifica
Qui creeremo una notifica separata per Toastr. quindi puoi usare showSuccess(), showError(), showInfo() e showWarning() in qualsiasi componente.
quindi mettiamo il codice qui sotto:
esegui il comando seguente:
ng generate service notification src/app/notification.service.ts
www.aol mail accedi
import { Injectable } from '@angular/core'; import { ToastrService } from 'ngx-toastr'; @Injectable({ providedIn: 'root' }) export class NotificationService { constructor(private toastr: ToastrService) { } showSuccess(message, title){ this.toastr.success(message, title) } showError(message, title){ this.toastr.error(message, title) } showInfo(message, title){ this.toastr.info(message, title) } showWarning(message, title){ this.toastr.warning(message, title) } } Passaggio 5: file di visualizzazione aggiornato
Ora qui, aggiorneremo il nostro file html. creeremo semplici quattro pulsanti per i messaggi di avviso.
quindi mettiamo il codice qui sotto:
src/app/app.component.html
Success Toaster Error Toaster Info Toaster Warning Toaster Passaggio 6: utilizzare il file ts del componente
Ora dobbiamo aggiornare il nostro file component.ts qui useremo il servizio di notifica e l'avviso di chiamata, aggiorniamo come di seguito:
src/app/app.component.ts
import { Component } from '@angular/core'; import { NotificationService } from './notification.service' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'toaster-not'; constructor(private notifyService : NotificationService) { } showToasterSuccess(){ this.notifyService.showSuccess('Data shown successfully !!', 'ItSolutionStuff.com') } showToasterError(){ this.notifyService.showError('Something is wrong', 'ItSolutionStuff.com') } showToasterInfo(){ this.notifyService.showInfo('This is info', 'ItSolutionStuff.com') } showToasterWarning(){ this.notifyService.showWarning('This is warning', 'ItSolutionStuff.com') } } Ora siamo pronti per eseguire entrambi:
Esegui l'app angolare:
ng serve Spero possa aiutarti…
#angular #webdev #javascript