Angular 4+通知库

Angular 4+通知库
插件名称 notification
发布时间 2020年7月16日
插件作者 cloukit

该通知库在Angular 4+应用程序上显示成功,错误,信息和警告通知。

安装:

# Yarn
$ yarn add @cloukit/notification

# NPM
$ npm install @cloukit/notification --save

如何使用它:

导入必要的模块。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CloukitDropoutModule } from '@cloukit/dropout';
import { CloukitThemeModule } from '@cloukit/theme';
import { CloukitNotificationModule } from '@cloukit/notification';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    CloukitThemeModule,
    CloukitNotificationModule,
    CloukitDropoutModule,
  ],
  providers: [ ],
  bootstrap: [ AppComponent ],
})

在您的组件模板中。

<cloukit-dropout-outlet></cloukit-dropout-outlet>
<cloukit-notification-outlet-loader
  theme="notification"
  placement="bottomLeft"
  offsetX="80"
  offsetY="0"
></cloukit-notification-outlet-loader>

创建一个演示通知。

import { Component } from '@angular/core';
import {
  CloukitNotificationService,
  CloukitNotification,
  CloukitNotificationType,
} from '@cloukit/notification';

@Component({
  selector: 'demo',
  template: `<button (click)="addNotification()">add</button>`,
  styles: []
})
export class DemoComponent {
  constructor(private notificationService: CloukitNotificationService) {}
  addNotification() {
    this.notificationService.addNotification(
      new CloukitNotification(
        'Success',                        // title
        'You clicked a button!',          // message
        CloukitNotificationType.SUCCESS,  // type
        null,                             // linkOne
        null,                             // linkTwo
        2000                              // Optional: Autoclose after 2secs
    ));
  }
}