虽然angular 已经迎来4.0时代,可我还在苦逼的看2.0。

下午有个任务:

让一个component组件里的时间显示当前时间并自动刷新。

过程:

 1.首先获取当前时间 new Date();

    2.弄个定时器隔一秒刷新呀;

开工:

app.component.ts中这样写到:

InitialTime=new Date();  //获取当前时间
data:string;
getTime(m){ //判断获取的分钟数是否小于10,小于10只会显示一位数,前面自动补0
if(m<10){
m="0"+m;
this.data=this.InitialTime.getHours()+":"+m; //显示时间(小时+分钟) eg 17:15
}
else{
this.data=this.InitialTime.getHours()+":"+this.InitialTime.getMinutes(); //显示时间(小时+分钟) eg 17:15
}
}
constructor(){
this.getTime(this.InitialTime.getMinutes()); //运行上面方法让时间显示
setInterval(()=>{ //设置定时器,隔1秒刷新一次,好实时监控时间
this.InitialTime=new Date();
this.getTime(this.InitialTime.getMinutes());
},1000);
}
app.component.html中这样写: <span class="time"> {{ date }}</span>
然后变成我想要的效果了,可是代码我自己都嫌长,而且还是用传统js方法写的。后来就想不是angular里面有Pipe管道吗,是不是可以试试。
再开工: 
app.component.ts是这样写的。

time:any=Date.now();  //获取当前时间
constructor(){
setInterval(()=>{ //设置定时器,隔1秒刷新一次,好实时监控时间
// this.birthday = new Date();
this.time=Date.now(); //Date里面自带方法
},1000);
}
app.component.html是这样写的: <span class="time"> {{time | date:"HH:mm" }}</span>
|是管道标示符。angular里面提供了内置的datePipe管道可以供我们使用
HH:mm 表示输出小时和分钟;yy:MM:dd  表示输出年月日
详情可以看看官网的管道介绍里面关于DatePipe Api的介绍。
同样的效果,代码量就大大减少,所以学习还是在完成的基础上多尝试。耶~~~

滑稽的下午--angularjs 2.0管道的使用的更多相关文章

  1. SQL Server(解决问题)已成功与服务器建立连接,但是在登录过程中发生错误。(provider: Shared Memory Provider, error:0 - 管道的另一端上无任何进程。

    http://blog.csdn.net/github_35160620/article/details/52676416 如果你在使用新创建的 SQL Server 用户名和密码 对数据库进行连接的 ...

  2. 转 AngularJS 2.0将面向移动应用并放弃旧浏览器

    AngularJS团队表示“AngularJS 2.0是移动应用的框架”.该框架将继续支持桌面,但其主要关注点变成了移动领域.它的目标还包括通过转译器支持EcmaScript 6(因为浏览器还不支持E ...

  3. (provider: 共享内存提供程序, error: 0 - 管道的另一端上无任何进程。) (Microsoft SQL Server,错误: 233)

    ------------------------------ 无法连接到 IFCA-LIUWEI/SQL2005. ------------------------------其他信息: 已成功与服务 ...

  4. 在向server发送请求时发生传输级错误。 (provider: 共享内存提供程序, error: 0 - 管道的还有一端上无不论什么进程。

    作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/36425825 SQL Server 2008 + VS2010 用C#编写的代 ...

  5. SQL Server 2005 sa登录失败。已成功与服务器建立连接 但是在登录过程中发生错误。 provider 共享内存提供程序 error 0 管道的另一端上无任何进程。

    SQL Server 2005 Express版 用户 'sa' 登录失败.该用户与可信 SQL Server 连接无关联.提示错误:已成功与服务器建立连接 但是在登录过程中发生错误. provide ...

  6. angularjs 2.0 快速开始

    前言 angularjs2.0 如果发布,公司的项目会基于2.0开发,在1.0的时候就踩了好多坑,趁这2.0还没正式发布,赶紧踩下坑. 这篇文章是参考angularjs2.0 官方文档写的,开发环境需 ...

  7. angularJS 2.0 开发的简单dome

    与其说这是一个demo,不如说是一个与高手的讨教过程.虽然demo出来了,可其中有些问题我还是不太明白,如果有angularjs2.0的大神,请进来指导一番,~~~~~不甚感激. 说明第一点:我采用的 ...

  8. angularjs 2.0 快速案例(1)

    前言 上一节我们已经把环境给搭建起来了,现在我们通过一个快速案例把angular 2.0 初步了解一下,后续我们会深入每一个细节,这个案例主要是一个[英雄(Hero)]列表的展示,创建,编辑.这个案例 ...

  9. 【AngularJS】——0.分析

    [引导分析]1.什么是AngularJS? 2.为什么要使用它? 3.应用场合? 4.基本思想? 5.四大核心特征? 6.优缺点是什么? 1.定义:AngularJS是一个用于设计动态web应用的前端 ...

随机推荐

  1. ZJOI 2015 诸神眷顾的幻想乡

    题目描述 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看.幽香当然也非常 ...

  2. 如何实现虚拟机(VirtualBox)中的Ubuntu与Windows XP间的数据共享

    环境: 主机是Windows XP系统 虚拟机与Ubuntu的版本分别为: VirtualBox-3.2.12-68302-Win ubuntu-10.10-desktop-i386 前提:已安装Vi ...

  3. Python的类与类型

    1.经典类与新式类 在了解Python的类与类型前,需要对Python的经典类(classic classes)与新式类(new-style classes)有个简单的概念. 在Python 2.x及 ...

  4. 小白的Python之路 day5 random模块和string模块详解

    random模块详解 一.概述 首先我们看到这个单词是随机的意思,他在python中的主要用于一些随机数,或者需要写一些随机数的代码,下面我们就来整理他的一些用法 二.常用方法 1. random.r ...

  5. ajax介绍及使用

    一.什么是ajax:(只刷新局部页面的技术) AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发 ...

  6. Java—javac Hello.java找不到文件

    刚开始编写Java代码时,会遇到很多困难,下面来说一个比较常见的错误,如下: 对于初学者,一般都是从Hello,World开始的学起的,废了好大劲儿,铜鼓了半天,终于要在DOS上运行javac Hel ...

  7. 小程序之ScrollView细节坑

    Scroll-View 相信大家在使用scroll-view的时候遇到不少问题,网上也有些答案,但是类似我这个问题,貌似没搜索到答案~~ 今天媳妇问我,为什么bindscrolltolower突然不生 ...

  8. 使用GitHub+hexo搭建个人独立博客

    前言 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...

  9. HDU 5144 NPY and shot(物理运动学+三分查找)

    NPY and shot Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  10. hdu_1011(Starship Troopers) 树形dp

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1011 题意:打洞洞收集脑子,你带领一个军队,洞洞互联成一棵树,每个洞中有一些bug,要全部杀死这些虫子 ...