如何顯示在角2

Question

通知在AngularJS（1.x版本），我們有ng-notify用於顯示通知，我們想知道 如何實現相同的角2

任何想法怎麼辦那？

Answer 1

我已經使用了PrimeNG包，其中包括大量的UI組件， 有消息組件來顯示通知： PrimeNG - Messages Component

希望它能幫助， 利奧爾

Answer 2

如果我們正在創造的一些成套FE我們正在使用已實施小吃店的Angular2材料。

https://github.com/angular/material2

https://material.angular.io/components

或者，您可以輕鬆地將烤麪包機，將顯示漂亮的材料祝酒 https://github.com/PointInside/ng2-toastr

我強烈建議都無一不在生產中進行了測試（雖然素材庫目前仍beta）

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

ng2-notify-popup對角2是基於ng-notify。你可以嘗試使用它。

Answer 5

我推薦的'angular2-notifications'使用起來非常簡單靈活。

的更多細節和演示：https://jaspero.co/resources/projects/ng-alerts

而且我們可以做alers與NG2的警告推動他們

Answer 6

檢查這個NPM包，它的超級好用，可能是你需要的東西！

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