[转]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 简介
2.使用步骤
根据官方教程一步步走:
安装@jaspero/ng2-alerts包
npm install --save @jaspero/ng2-alerts
在@NgModule中import进来JasperoAlertsModule模块
先import:
import { JasperoAlertsModule } from '@jaspero/ng2-alerts';
- @NgModule({
- imports: [
- JasperoAlertsModule
- ],
- declarations: [AppComponent],
- bootstrap: [AppComponent]
- })
- 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了:
- alerttest(){
- <span class="space" style="text-indent:2em;line-height:inherit;"> </span>this._alert.create('info', 'This is a message');
- }
如果想要设置一下alert的各种参数,官方提供了一个接口:
- export interface AlertSettings {
- overlay?: boolean;
- overlayClickToClose?: boolean;
- showCloseButton?: boolean;
- duration?: number;
- }
在这里我写了一个类继承了这个接口:
import {AlertSettings} from '@jaspero/ng2-alerts';
- export class alertsetting implements AlertSettings {
- overlay?: boolean = true;
- overlayClickToClose?: boolean = true;
- showCloseButton?: boolean = true;
- duration?: number = 5000;
- constructor(overlay?: boolean,
- overlayClickToClose?: boolean,
- showCloseButton?: boolean,
- duration?: number) {
- this.overlay = overlay;
- this.overlayClickToClose = overlayClickToClose;
- this.showCloseButton = showCloseButton;
- this.duration = duration;
- }
- }
给刚才那个调用再增加一个配置参数,把duration设为1000:
- alerttest(){
- <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));
- }
版权声明:本文为博主原创文章,未经博主允许不得转载。
---------------------
本文来自 Sophie1797 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/m0_37981481/article/details/79281879?utm_source=copy
[转]angular2中ng alerts的使用教程的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- php中的curl使用入门教程和常见用法实例
摘要: [目录] php中的curl使用入门教程和常见用法实例 一.curl的优势 二.curl的简单使用步骤 三.错误处理 四.获取curl请求的具体信息 五.使用curl发送post请求 六.文件 ...
- Swift语言中如何使用JSON数据教程
这是一篇翻译文章,原文出处:http://www.raywenderlich.com/82706/working-with-json-in-swift-tutorial Swift语言中如何使用JSO ...
- CSS从大图中抠取小图完整教程(background-position应用)
CSS从大图中抠取小图完整教程(background-position应用) 转自: http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111 ...
- 如何在Angular2中使用Forms
在Angular2中形成两个基本对象是Control和ControlGroup. 控制用户输入 Control 一个控制表示一个输入字段(ngFormControl) 一个控制可以绑定到一个input ...
- sql server中创建链接服务器图解教程
转自sql server中创建链接服务器图解教程 1.展开服务器对象-->链接服务器-->右击"新建链接服务器" 注意:必须以数据库管理员身份登录(通常也就是sa帐号) ...
- MySQL中的联合索引学习教程
MySQL中的联合索引学习教程 这篇文章主要介绍了MySQL中的联合索引学习教程,其中谈到了联合索引对排序的优化等知识点,需要的朋友可以参考下 联合索引又叫复合索引.对于复合索引:Mysql从左到 ...
- 在.Net Core中使用MongoDB的入门教程(二)
在上一篇文章中,讲到了MongoDB在导入驱动.MongoDB的连接,数据的插入等. 在.Net Core中使用MongoDB的入门教程(一) 本篇文章将接着上篇文章进行介绍MongoDB在.Net ...
- 在.Net Core中使用MongoDB的入门教程(一)
首先,我们在MongoDB的官方文档中看到,MongoDb的2.4以上的For .Net的驱动是支持.Net Core 2.0的. 所以,在我们安装好了MangoDB后,就可以开始MangoDB的.N ...
随机推荐
- Scrum冲刺阶段1
各个成员在 Alpha 阶段认领的任务 人员 任务 何承华 美化设计 部分后端设计 陈宇 后端设计 丁培辉 美化设计 部分后端设计 温志铭 前端设计 杨宇潇 服务器搭建 张主强 前端设计 明日各个成员 ...
- addEventListener()方法
★JS事件的捕获阶段和冒泡阶段: 讨论的主要是两个事件模型:IE事件模型与DOM事件模型 IE内核浏览器的事件模型是冒泡型事件(没有捕获事件过程),事件句柄的触发顺序是从ChildNode到Paren ...
- linux 查看机器cpu核数
CPU总核数 = 物理CPU个数 * 每颗物理CPU的核数 总逻辑CPU数 = 物理CPU个数 * 每颗物理CPU的核数 * 超线程数 查看CPU信息(型号) [root@AAA ~]# cat /p ...
- k-th smallest 问题总结
k-th smallest/biggest 问题大约有这几道: 373. Find K Pairs with Smallest Sums 从两个list里各取一个数求和,求所有可能的sum里第k小的 ...
- java框架学习_mybaties
Mybatis第一天 框架课程 1. 课程计划 第一天: 1.Mybatis的介绍 2.Mybatis的入门 a) 使用jdbc操作数据库存在的问题 b) Mybatis的架构 c) Mybati ...
- 三.mysql表的完整性约束
mysql表的完整性约束 什么是约束 not null 不能为空的 unique 唯一 = 不能重复 primary key 主键 = 不能为空 且 不能重复 foreign key ...
- 记一次安装VS2015后启动失败的修复过程
安装过程没有提示任何问题,然而启动vs时提示没有安装 .Net Framework 4.6,那就安装吧,但是安装 4.6 时却提示 Windows Moudle Installer 服务没有启动,于是 ...
- 2019-4-22 jdbc学习笔记
jdbc 一.定义:java database connector 二.常用的接口 java.sql.Driver 驱动 java.sql.Connection 链接 java.sql.State ...
- springmvc接受及响应ajax请求。 以及@RequestBody 和@ResponseBody注解的使用
1.发送ajax请求 $.ajax({ url:"user/testAjax", contentType:"application/json;charset=UTF-8& ...
- hdoj6483 A Sequence Game(ST预处理RMQ+莫队)
传送:http://acm.hdu.edu.cn/showproblem.php?pid=6483 题意:有长度为$n$的数组,对于一个子区间$[l,r]$内,存在最大值$mx$与最小值$mi$,有$ ...