Question

在AngularJS（版本1.x）中，我们有ng-notify用于显示通知，我们想知道如何在Angular 2中实现相同的功能。

知道怎么做吗？

Answer 1

我使用过包含很多UI组件的PrimeNG软件包，有消息组件来显示通知： PrimeNG - Messages Component

Answer 2

如果我们正在创建某个应用程序的完整FE，我们正在使用已实施小吃店的Angular2材料。

https://github.com/angular/material2

https://material.angular.io/components

或者您可以轻松整合烤面包机，以显示漂亮的材料烤面包 https://github.com/PointInside/ng2-toastr

我强烈建议两者都在生产中进行测试（虽然材料库目前仍处于测试阶段）

Answer 3

另一种选择是 ng2-toasty

以下是步骤：

1）使用 - npm install ng2-toasty --save

安装

2）更新systemjs.config.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

Answer 4

Angular 2的

ng2-notify-popup基于ng-notify。您可以尝试使用它。

Answer 5

检查这个npm包，它非常易于使用，可能就是你需要的！

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

Answer 6

您可以使用Snackbar

导入

Grid.RowSpan

显示：

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

回调：

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

Answer 7

我建议'angular2-notifications'使用简单灵活。

了解更多详情和演示：https://jaspero.co/resources/projects/ng-alerts

此外，我们可以让他们用ng2-alerts

来推动他们

如何在Angular 2中显示通知

7 个答案: