Angular 2 routing without reloading view

Question

I'm building a single-page application using Angular 2 that makes heavy use of maps. One of the requirements is that when an point is clicked on the map, the URL updates so that when the page is refreshed, the map is zoomed into that point (and also to support deep-linking to points on the map).

I was wondering what the best to achieve this in Angular 2 would be? At a high level, a Router seems like the obvious choice, but I'm not sure if it really fits the requirements.

For one, the selected point on the map will need to update a few different components on the map (e.g. the point on the map, highlight the point in a seperate list component, etc). As such, I don't think the router-outlet makes much sense - all views are always visible at the same time - there's no need to switch views out based on selected view.

I'm also not sure if I want any actions to trigger based on the URL change when using the application. i.e. if you click on a point on the map, everything already updates as expected - the only reason I want the URL to update is so that the point is still selected on reload.

Any guidance will be appreciated.

awiseman · Accepted Answer · 2016-05-23 01:10:04Z

It sounds like you could use the CanReuse and OnReuse hook in your map component to prevent your map from reloading when the route changes. Your map could respond to the change in route, but you'd be able to maintain the same instance.

https://angular.io/docs/js/latest/api/router/CanReuse-interface.html https://angular.io/docs/js/latest/api/router-deprecated/index/OnReuse-interface.html

Create a component for your map and bind that to your route so that it takes the point coordinates as a route parameter:

class MapComponent() implements OnActivate, CanReuse, OnReuse {

    coordinates: { 
        x: number,
        y: number
    }

    constructor(private params: RouteParams) {}

    routerOnActivate() {
        this.coordinates = parseCoords(this.params.getParam('coords'));
    }

    routerCanReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) {
        // return true if you can reuse this instance, otherwise reload
    }

    routerOnReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) {
        // update your map component and child components as needed
    }

}

@RouteConfig([
    { path: '<base-map-url>/:coords', component: MapComponent, name: 'MapCmp'
])
class AppComponent() { ... }

Note that this is an API provided by the deprecated router and hasn't yet been implemented in the New New Router. I'm not sure what the plan is for the RC router, but I would guess that they will implement similar hooks before long.

Alternatively, you may be able to accomplish what you want using the Location service:

https://angular.io/docs/ts/latest/api/common/index/Location-class.html

Thank you, I would just add that import {CanReuse} from '@angular/router-deprecated';

Collectives™ on Stack Overflow

Angular 2 routing without reloading view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related