Как отображать уведомления в Angular 2

в AngularJS (Версия 1.х) , у нас было ng-notify для отображения уведомлений,мы хотели бы знать как реализовать то же самое в Angular 2.

есть идеи, как это сделать?

8
angular notifications

6 ответов

Я использовал пакет PrimeNG, который включает в себя множество компонентов пользовательского интерфейса, компонент сообщений для отображения уведомлений: Компонент PrimeNG-Messages

надеется, что это поможет, Лиор!--3-->

6

Если мы создаем полный FE какого-то приложения, мы используем материал Angular2, который реализовал снэк-бар.

https://github.com/angular/material2

https://material.angular.io/components

или вы можете легко интегрировать тостер который покажет славные материальные тосты https://github.com/PointInside/ng2-toastr

Я могу настоятельно рекомендовать оба, и оба были протестированы в производстве (хотя библиотека материалов в настоящее время все еще бета-версия)

5

другой вариант:ng2-тосты

Ниже приведены шаги:

1)установить с помощью - npm install ng2-toasty --save

2) Обновление systemjs.конфиг.js 

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

3) Импорт 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) Используйте ToastyService для вашего приложения

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);
    }
}

простой пример здесь - http://akserg.github.io/ng2-webpack-demo/#/toasty

пример кода здесь - https://github.com/akserg/ng2-systemjs-demo

4

ng2-notify-popup для углового 2 основан на НГ-уведомить. Вы можете попробовать использовать это.

1

проверьте этот пакет npm, он очень прост в использовании и может быть только то, что вам нужно!

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

1

Я рекомендовал "angular2-уведомления" прост и гибок в использовании.

для больше деталей и демонстрации:https://jaspero.co/resources/projects/ng-alerts

кроме того, мы можем сделать оповещения, чтобы подтолкнуть их с ng2-alerts

0