在Angular 2的组件中,可以通过服务调用来监听路由变更。当路由变更时,需要停止之前通过setInterval函数设置的定时器。
要停止setInterval,可以使用clearInterval函数。在组件中,可以在路由变更时调用clearInterval来停止定时器。
以下是一个示例代码:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit, OnDestroy {
intervalId: any;
constructor(private router: Router) { }
ngOnInit() {
this.intervalId = setInterval(() => {
// 定时器逻辑
}, 1000);
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
// 路由变更前的逻辑
clearInterval(this.intervalId);
}
if (event instanceof NavigationEnd) {
// 路由变更后的逻辑
this.intervalId = setInterval(() => {
// 重新设置定时器
}, 1000);
}
});
}
ngOnDestroy() {
clearInterval(this.intervalId);
}
}
在上述代码中,首先在组件的ngOnInit方法中设置了一个定时器,并将其赋值给intervalId变量。然后通过router.events.subscribe方法订阅路由事件。在路由变更前,通过clearInterval函数停止之前的定时器。在路由变更后,重新设置定时器。
另外,在组件的ngOnDestroy方法中,需要在组件销毁时清除定时器,以防止内存泄漏。
这样,当路由变更时,定时器会被正确地停止和重新设置。
领取专属 10元无门槛券
手把手带您无忧上云