angular2组件中定时刷新并清除定时器的实例讲解

实例如下：

import { Component,OnInit,ChangeDetectionStrategy,ChangeDetectorRef,OnDestroy} from "@angular/core";

@Component({
changeDetection:ChangeDetectionStrategy.OnPush
})

export class xxxComponent{
private timer;
constructor(private ref : ChangeDetectorRef){
this.timer = setInterval(()=>{
this.ref.detechChanges();//检测变化
},5000)
}
//销毁组件时清除定时器
ngOnDestroy(){
if(this.timer){
clearInterval(this.timer);
}
}
}

以上这篇angular2组件中定时刷新并清除定时器的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS定时器的使用与移除操作方法【interval与timeout】

    本文实例讲述了AngularJS定时器的使用与移除操作方法.分享给大家供大家参考,具体如下: 1.相比较于JS中setTimeInterval和setTimeout,AngularJS中通过interval来实现定时器的效果,通过timeout来实现时间延迟. $timeout //实现的是延迟执行 $interval //实现的是定时器的效果 我们分别来看这两个服务 (1)timeout timeout相当于JS原生里面的延迟执行,不同的是该服务的函数返回的是一个promise对象. var

  • Angular实现的简单定时器功能示例

    本文实例讲述了Angular实现的简单定时器功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular定时器</title> <script src="angular.min.js"></scrip

  • AngualrJs清除定时器遇到的坑

    angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会影响系统的性能. 我在angular里边用原生的方法window.onunload方法竟然不管用,所以只好用angular自己的方法$destroy,这页面跳转,DOM结构发生变化是都能清除定时器 var timer = setInterval(function(){ $scope.$apply(function(){ //这里是想要定

  • AngularJS实现页面定时刷新

    有时我们在前端可能会有这样的需求: 1.每隔一段时间刷新一下页面中的数据 2.根据需要可以暂停和启用刷新 接下来我们就来看下AngularJS的实现方法: 首先我们了解到AngularJS中$interval可以用来处理间歇性处理一些事情,那么我们的间歇性刷新就使用interval来实现. $interval使用方法: 1.启动一个定时任务 $interval(function(){},n1,n2); 第一个参数function是指我们的定时任务要触发的事件, 第二个参数n1是指每隔多少毫秒触发

  • Angular.js中定时器循环的3种方法总结

    本文主要设计定时器的三种循环,模板自配,下面分享给大家供大家参考,具体如下: 1.$interlval实现,比较简单和原生js的setInterval比较相似 var app = angular.module('myApp',[]); app.run(function($rootScope , $interval){ var img=["http://hdn.xnimg.cn/photos/hdn321/20130612/2235/h_main_NNN4_e80a000007df111a.jpg

  • angular2组件中定时刷新并清除定时器的实例讲解

    实例如下: import { Component,OnInit,ChangeDetectionStrategy,ChangeDetectorRef,OnDestroy} from "@angular/core"; @Component({ changeDetection:ChangeDetectionStrategy.OnPush }) export class xxxComponent{ private timer; constructor(private ref : ChangeD

  • COM组件中调用JavaScript函数详解及实例

    COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

  • 对angular2中的ngfor和ngif指令嵌套实例讲解

    ng2 结构指令不能直接嵌套使用,可使用标签来包裹指令 示例如下 <ul> <ng-container *ngFor="let item of lists"> <div class="thumb p-date" *ngIf="item.picurl"> <a href="# " rel="external nofollow" ><img src=&quo

  • 对vue中v-on绑定自定事件的实例讲解

    关于官网vue中v-on绑定自定义事件的个人理解 对官网实例进行了一些修改,如下图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on绑定自定义事件</title> <script src="vue.js"></script> </head>

  • 对python中基于tcp协议的通信(数据传输)实例讲解

    阅读目录 tcp协议:流式协议(以数据流的形式通信传输).安全协议(收发信息都需收到确认信息才能完成收发,是一种双向通道的通信) tcp协议在OSI七层协议中属于传输层,它上承用户层的数据收发,下启网络层.数据链路层.物理层.可以说很多安全数据的传输通信都是基于tcp协议进行的. 为了让tcp通信更加方便需要引入一个socket模块(将网络层.数据链路层.物理层封装的模块),我们只要调用模块中的相关接口就能实现传输层下面的繁琐操作. 简单的tcp协议通信模板:(需要一个服务端和一个客户端) 服务

  • python中tkinter的应用:修改字体的实例讲解

    参考链接:tkinter book font字体的参数有如下6个 family: 字体类别,如'Fixdsys' size: 作为一个整数,以点字体的高度.为了获得字体的n个像素高,使用-n. weight: "BOLD" 表示加粗, "NORMAL" 表示正常大小,默认是NORMAL slant:斜体(默认正常), "NORMAL"表示正常,"ITALIC"表示字体倾斜 underline:下划线,1表示添加下滑线,0表示没

  • python pandas库中DataFrame对行和列的操作实例讲解

    用pandas中的DataFrame时选取行或列: import numpy as np import pandas as pd from pandas import Sereis, DataFrame ser = Series(np.arange(3.)) data = DataFrame(np.arange(16).reshape(4,4),index=list('abcd'),columns=list('wxyz')) data['w'] #选择表格中的'w'列,使用类字典属性,返回的是S

  • 对Python中list的倒序索引和切片实例讲解

    Python中list的倒序索引和切片是非常常见和方便的操作,但由于是倒序,有时候也不太好理解或者容易搞混. >>> nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] >>> print(nums[-1]) 9 >>> print(nums[-2:]) [8, 9] >>> print(nums[:-3]) [0, 1, 2, 3, 4, 5, 6] 例如,给定一个数组nums. 索引操作 nums[-1]

  • vue项目中跳转到外部链接的实例讲解

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = 'url'来实现,具体代码如下: <span @click="See(item.qj_url)">360全景看房</s

  • 对pandas将dataframe中某列按照条件赋值的实例讲解

    在数据处理过程中,经常会出现对某列批量做某些操作,比如dataframe df要对列名为"values"做大于等于30设置为1,小于30设置为0操作,可以这样使用dataframe的apply函数来实现, 具体实现代码如下: def fun(x): if x >= 30: return 1 else: return 0 values= feature['values'].apply(lambda x: fun(x)) 具体的逻辑可以修改fun函数来实现,但是按照某些条件选择列不是

随机推荐