In this tutorial we are going to learn how we can accidentally creating memory leaks in our application while using the Angular 2 router. We are going to learn how we can prove that the memory leak is happening, we are going to learn what is causing it and how we can fix it.

This is an issue that might become visible in very large applications which load a lot of data from the backend, and might cause errors that can be very hard to troubleshoot.

import {Component, OnInit, OnDestroy} from '@angular/core';
import {ActivatedRoute, RouterStateSnapshot, Router} from "@angular/router";
import {StarWarsService} from "../heros.service";
import {Observable, Subscription} from "rxjs"; @Component({
selector: 'app-hero',
templateUrl: 'hero.component.html',
styleUrls: ['hero.component.css']
})
export class HeroComponent implements OnInit, OnDestroy { hero: Observable<any>;
description: string;
querySub: Subscription; constructor(private route: ActivatedRoute,
private router: Router,
private starwarService: StarWarsService) { } ngOnInit() {
/* this.hero = this.router.params
.map((p:any) => p.id)
.switchMap( id => this.starwarService.getPersonDetail(id));
*/ // since herocomponent get init everytime, it would be better to use snapshot for proferemence
const heroId = this.route.snapshot.params['id'];
this.hero = this.starwarService.getPersonDetail(heroId); this.querySub = this.route.queryParams.subscribe(
param => this.description = param['description']
); console.log("observers", this.route.queryParams['observers'].length)
} ngOnDestroy(){
this.querySub.unsubscribe()
} }

Github

[Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks的更多相关文章

  1. [Angular2 Router] Lazy Load Angular 2 Modules with the Router

    Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start ...

  2. [Angular2 Router] Understand the Angular 2 Base href Requirement

    The <base href=”/”/> you define will determine how all other assets you plan on loading treat ...

  3. [Angular2 Router] Resolving route data in Angular 2

    From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know ...

  4. [Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable

    In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parame ...

  5. [Angular2 Router] Programmatic Router Navigation via the Router API - Relative And Absolute Router Navigation

    In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using t ...

  6. [Angular2 Router] Auxiliary Routes bit by bit

    Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see ...

  7. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  8. angular2 Router类中的路由跳转navigate

    navigate是Router类的一个方法,主要用来路由跳转. 函数定义 navigate(commands: any[], extras?: NavigationExtras) : Promise` ...

  9. [Angular2 Router] Load Data Based on Angular 2 Route Params

    You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http ...

随机推荐

  1. bzoj 3594 [Scoi2014]方伯伯的玉米田(DP+二维BIT)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3594 [题意] 给定一个n个数的序列,有K次将一个区间内的数加1的机会,问最长不下降子 ...

  2. WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0x80000002. Windows RegCreateKeyEx(...) returned error code 5

    以下是我的程序(取自headfirst Java): import javax.sound.midi.*; public class MiniMiniMusicApp { public static ...

  3. font-size的探究

    整理网上的资料 font字体,用px,em,100%,rem?分什么情况考虑? 我们逐渐意识到,我们用px作为文字大小的单位,已经出现很多问题.最主要是体现在用户不能灵活的控制文字的大小. 对于大多数 ...

  4. xcode XCTest录制后测试出错临时解决方法

    Xcode 使用 XCTest 做自动化测试,录制后在run UITest 的时候总是莫名报错,后来在方法执行前添加sleep()后,没有再出现错误,可能是xcode的一处BUG.

  5. 《Java数据结构与算法》笔记-CH5-链表-3双端链表

    /** * 双端链表的实现 */ class LinkA { public long dData; public LinkA next; public LinkA(long d) { dData = ...

  6. Python程序的混淆和加密

    混淆 为了增加代码阅读的难度, 源代码的混淆非常必要, 一个在线的Python代码混淆网站. 如果你觉得有用, 可以购买离线版本.同时需要注意的是, 这个混淆其实还是被很多人怀疑的, 因为即使混淆了, ...

  7. 一些推荐的spark/hadoop课程

    为了分享给你们,也为自己. 感谢下面的老师们! 1.王家林DT大数据梦工厂的大数据IMF传奇行动课程 总的目录是: 第一阶段:Linux和Java零基础企业级实战 第二阶段:Hadoop和Hive零基 ...

  8. Styling FX Buttons with CSS

    http://fxexperience.com/2011/12/styling-fx-buttons-with-css/ ——————————————————————————————————————— ...

  9. UVALive 3953 Strange Billboard (状态压缩+枚举)

    Strange Billboard 题目链接: http://acm.hust.edu.cn/vjudge/contest/129733#problem/A Description The marke ...

  10. SQL获取变量类型以及变量最大长度

    DECLARE @Temp nvarchar(1050)='' SELECT CAST(SQL_VARIANT_PROPERTY(@Temp, 'BaseType') AS VARCHAR(50))S ...