कैसे कोणीय 2

में सूचनाएं AngularJS में (संस्करण 1.x), हम सूचनाएं प्रदर्शित करने के लिए ng-notify था प्रदर्शित करने के लिए, हम जानते हैं कि कैसे कोणीय 2.कैसे कोणीय 2

किसी भी विचार में एक ही लागू करने के लिए कैसे करना चाहते हैं उस?

स्रोत

2016-12-26 refactor

इस प्रयास करें: https://github.com/flauc/angular2-notifications या आप अपने स्वयं बना सकते हैं। –

आप ng2 का उपयोग कर सकते हैं-अधिसूचित कर सकते हैं या आप अपना स्वयं का अधिसूचना लिख सकते हैं (https://www.npmjs.com/package/ng2-notify)। –

मैं "ng2-toastr" (npmjs.com/package/ng2-toastr) अनुशंसा कर सकता हूं अलर्ट, इंफोस, ... के लिए अधिसूचनाएं प्रदान करता हूं; बहुत उपयोगी और लचीला – Karl

मैं PrimeNG पैकेज है जो UI घटक का एक बहुत शामिल हैं का इस्तेमाल किया है, वहाँ गए संदेशों घटक सूचनाएं प्रदर्शित करने: PrimeNG - Messages Component

उम्मीद है यह मदद करता है, लियोर

स्रोत

2016-12-26 11:04:37

हम कुछ की पूरी एफई बना रहे हैं ऐप हम Angular2 सामग्री का उपयोग कर रहे हैं जिसने स्नैक बार लागू किया है।

https://github.com/angular/material2

https://material.angular.io/components

या आप आसानी से टोस्टर कि अच्छा सामग्री टोस्ट https://github.com/PointInside/ng2-toastr

दिखाएगा एकीकृत कर सकते हैं मैं दृढ़ता से सिफारिश कर सकते हैं दोनों और दोनों उत्पादन में परीक्षण किया गया है (हालांकि सामग्री पुस्तकालय वर्तमान में अभी भी है बीटा)

स्रोत

2016-12-26 11:22:36 Vojtech

टोस्टर का उपयोग करने के लिए आसान आसान है :) – refactor

एक और विकल्प 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

स्रोत

2016-12-26 13:10:21 Sanket

कोणीय 2 के लिए ng2-notify-popup ng-notify पर आधारित है। आप इसका उपयोग करने का प्रयास कर सकते हैं।

स्रोत

2017-04-24 16:25:04