在Angular 7中,当组件被卸载并重新加载时,可以使用ngOnDestroy生命周期钩子来执行一些清理操作。下面是一个示例代码,展示了如何在组件被销毁时取消订阅和清除定时器。
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';
@Component({
selector: 'app-my-component',
template: `
My Component
`
})
export class MyComponent implements OnInit, OnDestroy {
private subscription: Subscription;
private timer: any;
ngOnInit() {
// 订阅一个Observable
this.subscription = interval(1000).subscribe(() => {
console.log('Timer');
});
// 启动定时器
this.timer = setInterval(() => {
console.log('Interval');
}, 1000);
}
ngOnDestroy() {
// 取消订阅
this.subscription.unsubscribe();
// 清除定时器
clearInterval(this.timer);
}
}
在上面的示例中,ngOnInit生命周期钩子中订阅了一个Observable和启动了一个定时器。当组件被销毁时,ngOnDestroy生命周期钩子会被调用,取消订阅和清除定时器。
请注意,为了使用rxjs库中的Subscription和interval,需要在组件中导入相应的模块。
上一篇:Angular 7 - 最佳方式从服务器获得应用程序更新
下一篇:Angular 7 - [Deprecation] 因其对最终用户体验的不利影响,主线程上的同步XMLHttpRequest已被弃用。