Original Toastr mit Winkel 5?

Question

Ich mag das Original toastr b/c Ich könnte eine Nachricht "Element X gespeichert" und es bleibt auf der Seite für X Millisekunden, nachdem ich zurück auf die Homepage umleiten. Also würde ich gerne die ursprüngliche toastr Bibliothek mit Angular 5 verwenden und kann es nicht herausfinden. Gibt es einen Blogbeitrag oder ein Online-Beispiel, das dies zeigt?

Hinweis: Ich weiß, dass es npm-Pakete wie angular2-toaster und ein paar andere gibt, aber wenn ich versuche, sie mit Angular 5 CLI zu installieren und auszuführen, gibt es zahlreiche Fehlermeldungen und wenn ich ihre Github-Seite anschaue ausstehende Probleme und es scheint nur, dass Ag5 genug brechende Änderungen hatte, wo sie gerade noch nicht arbeiten, ohne den Quellcode zu analysieren und es zu hacken (und ich bin offensichtlich kein NPM-Experte). Scheint so, als hätten sie mit Ag4 gearbeitet, aber nicht mit Ag5?

Da Toastr eine Standard-JS-Bibliothek ist, warum kann ich nicht einfach einen Link zur Datei min.js in angluar-cli.json "scripts" hinzufügen und ein Standard-Popup wie die guten alten Tage vor SPA anzeigen? Ich habe heute Abend mit so vielen dieser npm-Bibliotheken heruntergeladen und gekämpft. Es scheint, als sei es viel schwieriger als es sein sollte, eine Standard-Bibliothek zu verwenden, die es seit Jahren gibt.

Danke.

Answer 1

Ich empfehle Ihnen Angular Material, das zu tun.

Sobald Sie es installiert haben (es funktioniert mit kantigem 5 und die Installation ist sehr einfach zu folgen), alles, was Sie brauchen, ist

private constructor(private snacker: MatSnackBar) {} 
// ... 
toast() { this.snacker.open('Text to display', 'Button text', { duration: 2000 }); } 

Answer 2

für toastr Sie diesen Link überprüfen und folgen Sie den Anweisungen dieses Unterstützung für Winkel 5

https://www.primefaces.org/primeng/#/growl 

mit Winkel 5 können Sie das externe CDN oder Link

Methode: 1 installieren npm packa ge für die toastr

npm install --save toastr 

in Datei .angular-cli.json in Import-Script Skripte Array von installierten Knotenmodul

"../node_modules/...../toastr.min.js 

und in Arten Array importieren Sie Ihre CSS-Datei

"../node_modules/...../toastr.min.css 

Wenn dies nicht funktioniert, fügen Sie CDN in die Datei index.html

<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>  
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" /> 

ein

und in der Komponente deklarieren nur die Variable wie unten und starten Sie Ihre Mutter toastr von https://github.com/CodeSeven/toastr

declare var toastr;