it-swarm.com.de

Anzeigen von Benachrichtigungen in Angular 2

In AngularJS (Version 1.x) hatten wir ng-notify zum Anzeigen von Benachrichtigungen möchten wir wissen.

Irgendeine Idee, wie das geht?

10
refactor

Ich habe das PrimeNG-Paket verwendet, das viele UI-Komponenten enthält. Dort wird die Nachrichtenkomponente angezeigt, um Benachrichtigungen anzuzeigen: PrimeNG - Nachrichtenkomponente

6
Leon K

Wenn wir ein komplettes FE für eine App erstellen, verwenden wir Angular2-Material, das eine Snackbar implementiert hat.

https://github.com/angular/material2

https://material.angular.io/components

Sie können auch problemlos einen Toaster integrieren, der Nice-Material-Toasts anzeigt https://github.com/PointInside/ng2-toastr

Ich kann beide dringend empfehlen und beide wurden in der Produktion getestet (obwohl die Materialbibliothek derzeit noch im Beta-Stadium ist)

5
Vojtech

Eine weitere Option ist ng2-toasty

Unten sind Schritte:

1) Installiere mit - npm install ng2-toasty --save

2) Aktualisieren Sie systemjs.config.js 

System.config({
    map: {
        'ng2-toasty': 'node_modules/ng2-toasty/bundles/index.umd.js'
    }
});

3) Importieren Sie ToastyModule

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {ToastyModule} from 'ng2-toasty';

@NgModule({
    imports: [
        BrowserModule,
        ToastyModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

4) Verwenden Sie den ToastyService für Ihre Anwendung

import {Component} from '@angular/core';
import {ToastyService, ToastyConfig, ToastOptions, ToastData} from 'ng2-toasty';

@Component({
    selector: 'app',
    template: `
        <div>Hello world</div>
        <button (click)="addToast()">Add Toast</button>
        <ng2-toasty></ng2-toasty>
    `
})
export class AppComponent {

    constructor(private toastyService:ToastyService, private toastyConfig: ToastyConfig) { 
        // Assign the selected theme name to the `theme` property of the instance of ToastyConfig. 
        // Possible values: default, bootstrap, material
        this.toastyConfig.theme = 'material';
    }

    addToast() {
        // Just add default Toast with title only
        this.toastyService.default('Hi there');
        // Or create the instance of ToastOptions
        var toastOptions:ToastOptions = {
            title: "My title",
            msg: "The message",
            showClose: true,
            timeout: 5000,
            theme: 'default',
            onAdd: (toast:ToastData) => {
                console.log('Toast ' + toast.id + ' has been added!');
            },
            onRemove: function(toast:ToastData) {
                console.log('Toast ' + toast.id + ' has been removed!');
            }
        };
        // Add see all possible types in one shot
        this.toastyService.info(toastOptions);
        this.toastyService.success(toastOptions);
        this.toastyService.wait(toastOptions);
        this.toastyService.error(toastOptions);
        this.toastyService.warning(toastOptions);
    }
}

Einfache Demo hier verfügbar - http://akserg.github.io/ng2-webpack-demo/#/toasty

Beispielcode hier verfügbar - https://github.com/akserg/ng2-systemjs-demo

4
Sanket

ng2-notify-popup für Angular 2 basiert auf ng-notify . Sie können es versuchen.

1
Vaibhav Bansal

Überprüfen Sie dieses npm-Paket, es ist sehr einfach zu bedienen und kann genau das sein, was Sie brauchen!

https://www.npmjs.com/package/angular-ntf

1
Santiago

Das könnte man mit einer Snackbar machen

Einführen

import {MatSnackBarModule} from '@angular/material/snack-bar';

Anzeige:

let snackBarRef = snackBar.open('Message archived');

Rückrufe:

snackBarRef.afterDismissed().subscribe(() => {
  console.log('The snack-bar was dismissed');
});


snackBarRef.onAction().subscribe(() => {
  console.log('The snack-bar action was triggered!');
});

snackBarRef.dismiss();
1
Willi Mentzel

Ich empfehle, "angle2-Notifications" ist einfach und flexibel zu bedienen.

für weitere Details und Demo: https://jaspero.co/resources/projects/ng-alerts

Außerdem können wir Alere erstellen, um sie mit ng2-Alerts zu pushen

0
Anouar Mokhtari