web-dev-qa-db-fra.com

ngx-toastr, Toast non affiché dans Angular 7

Je développe actuellement une application web en utilisant Angular 7. Je voulais inclure ngx-toastr pour envoyer des notifications aux utilisateurs mais cela ne fonctionne pas comme prévu. Lorsque je déclenche un toast, rien ne se passe, sauf pour une boîte de la taille d'un toast apparaît dans le coin inférieur droit, mais uniquement lorsque survolé par le coursor. Suite à un exemple de la façon dont je déclenche la fonction toastr. Test est invoqué par le clic d'un bouton.

import {ToastrService} from 'ngx-toastr';
@Component({
  selector: 'app-action-controls',
  templateUrl: './action-controls.component.html',
  styleUrls: ['./action-controls.component.scss']
})
export class Notification implements OnInit {
  test(){   
          this.toast.success("I'm a toast!", "Success!");
  }
 constructor(private toast: ToastrService) { }
}

J'inclus les fichiers css de la bibliothèque dans le fichier angular.json dans mon projet comme ceci:

     ...        
     "styles": [
        "src/styles.scss",
        "node_modules/bootstrap/scss/bootstrap.scss",
        "node_modules/ngx-toastr/toastr.css"
      ],
      ...

Et comme ceci dans mon fichier app.module.ts:

...
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToastrModule} from 'ngx-toastr';
...
  imports: [
    ...
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 1000,
      positionClass: 'toast-bottom-right'
    })
   ]
...

Je ne peux pas comprendre ce que je fais mal, quelqu'un a-t-il eu des expériences similaires? Merci d'avance!

angulartoastr
49
Marvin W.

Je suis tombé à nouveau sur ce problème. Les ressources ci-dessus ont dit que c'était fixe mais pas pour moi. Même après avoir obtenu les dernières ressources pour les deux bootstrap et toastr. Après de nombreuses investigations, j'ai trouvé que l'ajout de '! Important' aux arrière-plans du type d'alerte toastr résolu cela pour moi. Voir le code ci-dessous.

.toast-success{background-color:#51A351!important;}
.toast-error{background-color:#BD362F!important;}
.toast-info{background-color:#2F96B4!important;}
.toast-warning{background-color:#F89406!important;}

Bien que ce ne soit pas une bonne pratique, j'ai ajouté le code au fichier .min.css. Nous hébergeons cependant ces fichiers dans notre CDN AWS ​​CloudFront et il n'est pas nécessaire de dupliquer les CDN.

0
Douglas

Pour moi, aucune de ces solutions n'a aidé. Ce que j'ai fait à la fin, c'était de définir cela dans Angular.json pour la configuration de production:

    "extractCss": false
0
Nadine