Angular 5+的简单通知库– ngx-notifications

Angular 5+的简单通知库– ngx-notifications
插件名称 ngx-notifications
发布时间 2020年6月4日
插件作者 stanvanheumen

ngx-notifications是一个简单的库,可让您在Angular 5+应用程序中通知您的用户。

特征:

  • 易于实施
  • 延迟加载兼容
  • Angular Universal兼容
  • 提前编译兼容
  • 自动支持多种语言

安装:

# Yarn
$ yarn add @stanvanheumen/ngx-notifications

# NPM
$ npm install @stanvanheumen/ngx-notifications --save

例子

将添加<ngx-notifications-list></ngx-notifications-list>到您的AppComponent。这将是显示通知的地方。

import {NotificationsService} from '@stanvanheumen/ngx-notifications';
import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <ngx-notifications-list></ngx-notifications-list>
    `
})
export class AppComponent implements OnInit {

    constructor(private notifications: NotificationsService) {
    }
    
    ngOnInit() {
        this.notifications.success('事情进展得很顺利!');
        this.notifications.error('情况变得非常糟糕!');
        this.notifications.warn('我要警告你一件事!');
        this.notifications.info('只是一些相关的信息.');
    }

}

选项

通知

属性类型需要描述
title string false 通知的标题。(默认基于类型)
text string true 通知文字。
type NotificationType true 通知的类型。
timeout number false 通知将停留在屏幕上的时间(以毫秒为单位)(默认为4000毫秒)。
icon string false 通知的图标。(默认基于类型)

通知类型

枚举
Success
Warning
Error
Info