Angular 2+通知弹出组件 - ng2-notify-popup

Angular 2+通知弹出组件 - ng2-notify-popup
插件名称 ng2-notify-popup
发布时间 2020年10月16日
插件作者 shubhi1407

一个简单,轻巧的模块,用于在Angular 2/4应用中显示通知。

安装:

$ npm install –save ng2-popup-notify

用法

配置您的System.config

System.config({
  defaultJSExtensions: true,
  map: {
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    "rxjs": "node_modules/rxjs",
    ...
    'ng2-notify-popup' : 'npm:ng2-notify-popup',
  },
  packages: {        
    'app': {
      main : './main.ts',
      defaultJSExtensions : 'ts'
    },
    "ng2-notify-popup" : {
      main:'./index.js',
      defaultExtension : 'js'
    }
  }
});

然后从你的AngularAppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';


import 'web-animations-js';  


import { NgNotifyPopup } from 'ng2-notify-popup';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
 
    NgNotifyPopup
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

导入库后,即可使用其通知服务

import { Component } from '@angular/core';
import { NotificationService } from 'ng2-notify-popup';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [NotificationService]
})
export class AppComponent {

  constructor(private notify: NotificationService) { }

  
  show(text: string, type: string): void {
    this.notify.show(text, { position:'top', duration:'2000', type: 'success' });
  }
  
  showModular(text: string, type: string): void {
    this.notify.show(text, { position:'top', duration:'2000', type: 'success', location: '#modular' });
  }