你可能知道当你订阅可观察到的对象或设置事件监听时,在某个时间点,你需要执行取消订阅操作,进而释放操作系统的内存。否,则你的应用程序可能会出现内存泄露。
接下来让我们看一下,需要在ngOnDestroy生命周期钩子中,手动执行取消订阅操作的一些常见场景。
<强>手动释放资源场景
表单
出口类TestComponent {
ngOnInit () {
这一点。形式=new FormGroup ({…});//监听表单值的变化
这一点。valueChanges=this.form.valueChanges.subscribe (console.log);//监听表单状态的变化
这一点。statusChanges=this.form.statusChanges.subscribe (console.log);
}
ngOnDestroy () {
this.valueChanges.unsubscribe ();
this.statusChanges.unsubscribe ();
}
}
之前
以上方案也适用于其它的表单控件。
路由
出口类TestComponent {
构造函数(私人路线:ActivatedRoute私人路由器:路由器){}
ngOnInit () {
this.route.params.subscribe (console.log);
this.route.queryParams.subscribe (console.log);
this.route.fragment.subscribe (console.log);
this.route.data.subscribe (console.log);
this.route.url.subscribe (console.log);
this.router.events.subscribe (console.log);
}
ngOnDestroy () {//手动执行取消订阅的操作
}
}
之前
渲染器服务
出口类TestComponent {
构造函数(
私人渲染器:Renderer2,
私人元素:ElementRef) {}
ngOnInit () {
这一点。单击=this.renderer
.listen (this.element。nativeElement”,点击“处理程序);
}
ngOnDestroy () {
this.click.unsubscribe ();
}
}
之前
无限可见
当你使用时间间隔()或fromEvent()操作符时,你创建的是一个无限的可观察到的对象。这样的话,当我们不再需要使用它们的时候,就需要取消订阅,手动释放资源。
出口类TestComponent {
构造函数(私人元素:ElementRef) {}
间隔:订阅;
点击:订阅;
ngOnInit () {
this.interval=Observable.interval (1000) .subscribe (console.log);
这一点。点击=Observable.fromEvent (this.element.nativeElement,“点击”)
.subscribe (console.log);
}
ngOnDestroy () {
this.interval.unsubscribe ();
this.click.unsubscribe ();
}
}
之前
回来的商店
出口类TestComponent {
构造函数(私人存储:存储){}
待办事项:订阅;
ngOnInit () {/* *
*选择(重点:字符串){
*返回。地图(国家=比;状态(例子)).distinctUntilChanged ();
*}
*/这一点。待办事项=this.store.select(“待办事项”).subscribe (console.log);
}
ngOnDestroy () {
this.todos.unsubscribe ();
}
}
之前
<强>无需手动释放资源场景
<强> AsyncPipe
@ component ({
选择器:“测试”,
模板:“& lt;行动计划(待办事项)=" todos $ |异步"祝辞& lt;/todos>”
}）
出口类TestComponent {
构造函数(私人存储:存储){}
ngOnInit () {
这一点。todos美元=this.store.select(“待办事项”);
}
}
当组件销毁时,异步管道会自动执行取消订阅操作,进而避免内存泄露的风险。
角AsyncPipe源码片段
@Pipe ({name:“异步”,纯:假})
出口类AsyncPipe实现>
出口类TestDirective {
@HostListener(点击)>//订阅
这一点。处理程序=this.renderer。听(“文档”,“点击”,事件=祝辞{…});//退订
this.handler ();
之前
<强>有限可观测的
当你使用HTTP服务或定时器可观察到的对象时,你也不需要手动执行取消订阅操作。
出口类TestComponent {
构造函数(私人http: http) {}
ngOnInit () {//表示1 s后发出值,然后就结束了
Observable.timer (1000) .subscribe (console.log);
this.http.get (“http://api.com”) .subscribe (console.log);
}
}
