本文转自: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

[转]angular2中ng alerts的使用教程的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. php中的curl使用入门教程和常见用法实例

    摘要: [目录] php中的curl使用入门教程和常见用法实例 一.curl的优势 二.curl的简单使用步骤 三.错误处理 四.获取curl请求的具体信息 五.使用curl发送post请求 六.文件 ...

  3. Swift语言中如何使用JSON数据教程

    这是一篇翻译文章,原文出处:http://www.raywenderlich.com/82706/working-with-json-in-swift-tutorial Swift语言中如何使用JSO ...

  4. CSS从大图中抠取小图完整教程(background-position应用)

    CSS从大图中抠取小图完整教程(background-position应用)  转自: http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111 ...

  5. 如何在Angular2中使用Forms

    在Angular2中形成两个基本对象是Control和ControlGroup. 控制用户输入 Control 一个控制表示一个输入字段(ngFormControl) 一个控制可以绑定到一个input ...

  6. sql server中创建链接服务器图解教程

    转自sql server中创建链接服务器图解教程 1.展开服务器对象-->链接服务器-->右击"新建链接服务器" 注意:必须以数据库管理员身份登录(通常也就是sa帐号) ...

  7. MySQL中的联合索引学习教程

    MySQL中的联合索引学习教程 这篇文章主要介绍了MySQL中的联合索引学习教程,其中谈到了联合索引对排序的优化等知识点,需要的朋友可以参考下   联合索引又叫复合索引.对于复合索引:Mysql从左到 ...

  8. 在.Net Core中使用MongoDB的入门教程(二)

    在上一篇文章中,讲到了MongoDB在导入驱动.MongoDB的连接,数据的插入等. 在.Net Core中使用MongoDB的入门教程(一) 本篇文章将接着上篇文章进行介绍MongoDB在.Net ...

  9. 在.Net Core中使用MongoDB的入门教程(一)

    首先,我们在MongoDB的官方文档中看到,MongoDb的2.4以上的For .Net的驱动是支持.Net Core 2.0的. 所以,在我们安装好了MangoDB后,就可以开始MangoDB的.N ...

随机推荐

  1. 在datasnap 中使用unidac 访问数据(服务器端)

    从delphi 6 开始,datasnap 作为delphi 自带的多层框架,一直更新到最新的delphi 10.3 .同时逐步增加了很多新的功能 ,比如支持REST 调用,支持 IIS ,apach ...

  2. 修改maven 本地仓库,加入阿里云

    阿里云仓库服务 http://maven.aliyun.com/mvn/view maven加入阿里云服务 在maven  conf文件下修改settings.xml 修改本地仓库<localR ...

  3. 虚拟机下Linux操作Ubuntu

    备忘Ubuntu虚拟机环境配置 目录 更新源修改 #支持https的下载 apt 源使用 HTTPS 以确保软件下载过程中不被篡改.因此,我们首先需要添加使用 HTTPS 传输的软件包以及 CA 证书 ...

  4. java 项目的路径详情

    title: 项目下的路径问题tags:grammar_cjkRuby: true--- 在javaee的项目中,存取文件,解析xml和properties文件,以及项目中的文件,都需要获取路径,常用 ...

  5. Apache Phoenix Flume集成 -- JsonEventSerializer改进

    背景 数据从kafka ingest到Phoenix.数据格式采取Json.数据链路: api -> kafka -> Flume -> Phoenix 官方JsonEventSer ...

  6. 在Azure DevOps Server(TFS系统)中部署回退/回滚方案(Rollback)

    概述 Azure DevOps Server(之前名TFS)是微软公司实现软件研发.测试和部署一体化的全流程解决方案.在近几年的研发过程中,Azure DevOps Server 大幅增强了软件部署过 ...

  7. Linux Ubuntu部署web环境及项目tomcat+jdk+mysql

    1,下载文件 在官网下载好 tomcat.jdk.mysql的linux压缩包 后缀名为.tar.gz 并通过xftp上传到服务器 或者直接通过linux命令 下在wget文件的下载地址 例如: wg ...

  8. 2019-4-22 linux学习

    linux 一.linux的目录结构 /          挂载目录:为所有目录的根目录 home  家目录:    用户的根目录 存放普通用户的文件 例如:创建一个jack用户,就会产生一个Jack ...

  9. LeetCode算法题(长期更新)

    1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样 ...

  10. python实现桶排序算法

    桶排序算法也是一种可以以线性期望时间运行的算法,该算法的原理是将数组分到有限数量的桶里,每个桶再分别排序. 它的算法流程如下所示: 设置一个定量的数组当作空桶子. 寻访序列,并且把项目一个一个放到对应 ...