{"id":2457,"date":"2018-04-10T11:38:54","date_gmt":"2018-04-10T09:38:54","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2457"},"modified":"2018-04-10T11:38:54","modified_gmt":"2018-04-10T09:38:54","slug":"sticky-routes-in-angular-2-3","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/","title":{"rendered":"Sticky Routes In Angular 2.3+"},"content":{"rendered":"
\n

Beginning with Version 2.3 (and the corresponding Router Version 3.3), Angular will support sticky routes. Such routes preserve the current component's state when they are deactivated, so that it is still available when it is re-activated later. For this, the application can define its own Strategy for reusing components. This post shows how to use this new technique by an example<\/a> that can be found here<\/a>.<\/p>\n

\nThis post is covering the basics and I'm sure that Victor Savkin<\/a>, the team-member behind the router, will write an in-depth post about this during the next days.\n<\/p><\/blockquote>\n

Overview<\/h1>\n

To illustrate the behavior of sticky routes, I'm using an example application with a route that allows to search for flights. One of the found flights can be selected:<\/p>\n

\"Sample<\/a><\/p>\n

As this route's component stores its state within its own properties, this state is lost when the user deactivates the route by navigating to another one. When the user navigates back to to it, they will face an empty search result:<\/p>\n

\"Empty<\/a><\/p>\n

With sticky routes, the former state would have been reused and the user would see the last search result.<\/p>\n

Implementing a RouteReuseStrategy<\/h1>\n

To get sticky routes, an application has to implement\/ extend the abstract class RouteReuseStrategy<\/code>:<\/p>\n

\/\/ Taken from angular's source code at github:\nexport declare abstract class RouteReuseStrategy {\n    \/**\n     * Determines if this route (and its subtree) should be detached to be reused later.\n     *\/\n    abstract shouldDetach(route: ActivatedRouteSnapshot): boolean;\n    \/**\n     * Stores the detached route.\n     *\/\n    abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void;\n    \/**\n     * Determines if this route (and its subtree) should be reattached.\n     *\/\n    abstract shouldAttach(route: ActivatedRouteSnapshot): boolean;\n    \/**\n     * Retrieves the previously stored route.\n     *\/\n    abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle;\n    \/**\n     * Determines if a route should be reused.\n     *\/\n    abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;\n}\n<\/code><\/pre>\n
As the comments in the last listing state, a RouteReuseStrategy<\/code> decides on whether the router should store the current route when deactivating it or whether the router should restore it when the user re-activates it. In addition to this, it is also responsible for storing and retrieving the routes in question.<\/p>\n
The following listing shows a simple implementation of a RouteReuseStrategy<\/code> that stores the routes in an map with the name handlers<\/code>:<\/p>\n
\/\/ This impl. bases upon one that can be found in the router's test cases.\nexport class CustomReuseStrategy implements RouteReuseStrategy {\n\n    handlers: {[key: string]: DetachedRouteHandle} = {};\n\n    shouldDetach(route: ActivatedRouteSnapshot): boolean {\n        console.debug('CustomReuseStrategy:shouldDetach', route);\n        return true;\n    }\n\n    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {\n        console.debug('CustomReuseStrategy:store', route, handle);\n        this.handlers[route.routeConfig.path] = handle;\n    }\n\n    shouldAttach(route: ActivatedRouteSnapshot): boolean {\n        console.debug('CustomReuseStrategy:shouldAttach', route);\n        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];\n    }\n\n    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {\n        console.debug('CustomReuseStrategy:retrieve', route);\n        if (!route.routeConfig) return null;\n        return this.handlers[route.routeConfig.path];\n    }\n\n    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {\n        console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);\n        return future.routeConfig === curr.routeConfig;\n    }\n\n}\n<\/code><\/pre>\n
Activating the custom RouteReuseStrategy<\/h1>\n
To activate a custom RouteReuseStrategy<\/code> the application has to set up a provider for it:<\/p>\n
@NgModule({\n    [...],\n    providers: [\n        {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}\n    ]\n)}\nexport class AppModule {\n}\n<\/code><\/pre>\n
After this, the application should behave in the above described desired way. As mentioned, the implementation shown here can be found in my github account.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
With RouteReuseStrategy<\/p>\n","protected":false},"author":9,"featured_media":2997,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2457","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"acf":[],"yoast_head":"\nSticky Routes In Angular 2.3+ - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sticky Routes In Angular 2.3+ - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"With RouteReuseStrategy\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-10T09:38:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Sticky Routes In Angular 2.3+\",\"datePublished\":\"2018-04-10T09:38:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/\"},\"wordCount\":318,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/\",\"name\":\"Sticky Routes In Angular 2.3+ - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"datePublished\":\"2018-04-10T09:38:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"width\":1280,\"height\":853},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sticky Routes In Angular 2.3+\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sticky Routes In Angular 2.3+ - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/","og_locale":"en_US","og_type":"article","og_title":"Sticky Routes In Angular 2.3+ - ANGULARarchitects","og_description":"With RouteReuseStrategy","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/","og_site_name":"ANGULARarchitects","article_published_time":"2018-04-10T09:38:54+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Sticky Routes In Angular 2.3+","datePublished":"2018-04-10T09:38:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/"},"wordCount":318,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/","name":"Sticky Routes In Angular 2.3+ - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","datePublished":"2018-04-10T09:38:54+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","width":1280,"height":853},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/sticky-routes-in-angular-2-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Sticky Routes In Angular 2.3+"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=2457"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2457\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/2997"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=2457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}