[转]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 ...
随机推荐
- 在datasnap 中使用unidac 访问数据(服务器端)
从delphi 6 开始,datasnap 作为delphi 自带的多层框架,一直更新到最新的delphi 10.3 .同时逐步增加了很多新的功能 ,比如支持REST 调用,支持 IIS ,apach ...
- 修改maven 本地仓库,加入阿里云
阿里云仓库服务 http://maven.aliyun.com/mvn/view maven加入阿里云服务 在maven conf文件下修改settings.xml 修改本地仓库<localR ...
- 虚拟机下Linux操作Ubuntu
备忘Ubuntu虚拟机环境配置 目录 更新源修改 #支持https的下载 apt 源使用 HTTPS 以确保软件下载过程中不被篡改.因此,我们首先需要添加使用 HTTPS 传输的软件包以及 CA 证书 ...
- java 项目的路径详情
title: 项目下的路径问题tags:grammar_cjkRuby: true--- 在javaee的项目中,存取文件,解析xml和properties文件,以及项目中的文件,都需要获取路径,常用 ...
- Apache Phoenix Flume集成 -- JsonEventSerializer改进
背景 数据从kafka ingest到Phoenix.数据格式采取Json.数据链路: api -> kafka -> Flume -> Phoenix 官方JsonEventSer ...
- 在Azure DevOps Server(TFS系统)中部署回退/回滚方案(Rollback)
概述 Azure DevOps Server(之前名TFS)是微软公司实现软件研发.测试和部署一体化的全流程解决方案.在近几年的研发过程中,Azure DevOps Server 大幅增强了软件部署过 ...
- Linux Ubuntu部署web环境及项目tomcat+jdk+mysql
1,下载文件 在官网下载好 tomcat.jdk.mysql的linux压缩包 后缀名为.tar.gz 并通过xftp上传到服务器 或者直接通过linux命令 下在wget文件的下载地址 例如: wg ...
- 2019-4-22 linux学习
linux 一.linux的目录结构 / 挂载目录:为所有目录的根目录 home 家目录: 用户的根目录 存放普通用户的文件 例如:创建一个jack用户,就会产生一个Jack ...
- LeetCode算法题(长期更新)
1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样 ...
- python实现桶排序算法
桶排序算法也是一种可以以线性期望时间运行的算法,该算法的原理是将数组分到有限数量的桶里,每个桶再分别排序. 它的算法流程如下所示: 设置一个定量的数组当作空桶子. 寻访序列,并且把项目一个一个放到对应 ...