zoukankan      html  css  js  c++  java
  • [转]angular2中ng alerts的使用教程

    本文转自:https://blog.csdn.net/m0_37981481/article/details/79281879

    由于想要一个好看的alert,于是去npm上搜了一下,手动捂脸,npm上的package是真的多。。。

    挑选了一个简洁大方的ng-alerts,拿来和大家分享一下使用过程。

    环境:vs code

    ng-alerts有一个官方的demo与教程:https://jaspero.co/resources/projects/ng-alerts

     
     

    1.官方demo 简介

    demo在页面的底端,如下图所示,可以调整各种参数。
     
    1. message是alert的内容
    2. type是alert的类型,共success,warning,error,info四种。
     
    3. overlay是指alert出来的时候使页面其他部分变暗得覆盖层
    4. close on overlay click是指alert显示出来的时候,点一下页面其他变暗的部分可以关闭alert
    5. close button是指关掉alert的按钮
    6. alert duration是指alert显示的时间长短
     
     

    2.使用步骤

    根据官方教程一步步走:

    安装@jaspero/ng2-alerts包

    npm install --save @jaspero/ng2-alerts
     

    在@NgModule中import进来JasperoAlertsModule模块

     先import:

    import { JasperoAlertsModule } from '@jaspero/ng2-alerts';
     
    1.  
      @NgModule({
    2.  
      imports: [
    3.  
      JasperoAlertsModule
    4.  
      ],
    5.  
      declarations: [AppComponent],
    6.  
      bootstrap: [AppComponent]
    7.  
      })
    8.  
      export class AppModule {}

    在html中写上:

    <jaspero-alerts [defaultSettings]="options"></jaspero-alerts>
     

    顺便再html中创建一个test的按钮:

    <button class="btn btn-priamry" (click)="alerttest()">test</button>
     

    在你的component类的构造函数中注入AlertsService: 

    import {AlertsService} from '@jaspero/ng2-alerts';
     
    constructor(private _alert: AlertsService) {}
     

    然后就可以写一个函数来试一下alert了:

    1.  
      alerttest(){
    2.  
      <span class="space" style="text-indent:2em;line-height:inherit;"> </span>this._alert.create('info', 'This is a message');
    3.  
      }

    如果想要设置一下alert的各种参数,官方提供了一个接口:

    1.  
      export interface AlertSettings {
    2.  
      overlay?: boolean;
    3.  
      overlayClickToClose?: boolean;
    4.  
      showCloseButton?: boolean;
    5.  
      duration?: number;
    6.  
      }

    在这里我写了一个类继承了这个接口:

     先import:
    import {AlertSettings} from '@jaspero/ng2-alerts';
     
     
     
    1.  
      export class alertsetting implements AlertSettings {
    2.  
      overlay?: boolean = true;
    3.  
      overlayClickToClose?: boolean = true;
    4.  
      showCloseButton?: boolean = true;
    5.  
      duration?: number = 5000;
    6.  
      constructor(overlay?: boolean,
    7.  
      overlayClickToClose?: boolean,
    8.  
      showCloseButton?: boolean,
    9.  
      duration?: number) {
    10.  
      this.overlay = overlay;
    11.  
      this.overlayClickToClose = overlayClickToClose;
    12.  
      this.showCloseButton = showCloseButton;
    13.  
      this.duration = duration;
    14.  
      }
    15.  
      }

    给刚才那个调用再增加一个配置参数,把duration设为1000:

    1.  
      alerttest(){
    2.  
      <span class="space" style="text-indent:2em;line-height:inherit;"> </span>this._alert.create('info', 'This is a message',new alertsetting(true,true,true,1000));
    3.  
      }

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    --------------------- 本文来自 Sophie1797 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/m0_37981481/article/details/79281879?utm_source=copy 

  • 相关阅读:
    matlab安装YaHei Consolas Hybrid字体
    Matlab各种拟合
    正态分布
    JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)
    【调侃】IOC前世今生
    使用jquery的 uploadify,在谷歌浏览器上总会崩溃的解决方法
    源代码管理工具TFS2013安装与使用
    C# 给枚举定义DescriptionAttribute,把枚举转换为键值对
    Bootstrap 中文官网
    时间 时间戳 转换
  • 原文地址:https://www.cnblogs.com/freeliver54/p/9741701.html
Copyright © 2011-2022 走看看