Angular 2 Passing object between routes

Question

Trying to find the answer on how to pass a common object between routes.

I have a service which store socket.io

I need to have access to that socket service across my whole site so I can listen for emits.

I have a route.ts file and I am not sure how to initialise a socket service in the root then pass it to the route when needed.

I have read the docs and I am trying to use data like below in my route.ts file:

const routes: RouterConfig = [

    { path: '', component: AppComponent },
    { path: 'function1', component: Function1Component, data: { socket: socket }},
];

However I dont know where to declare the socket service.

Thanks

Sounds like you want to create a service. If you provide it in your bootstrap, the same instance will be available in any of your components just by creating a constructor parameter using the type. Take a look at [my question](http://stackoverflow.com/questions/36198785/how-do-i-create-a-singleton-service-in-angular-2) — Jason Goemaat, Aug 11 '16 at 04:03

Pankaj Parkar · Accepted Answer · 2016-08-11T04:04:46.463

In your case you are trying to pass some function reference(which is going to return object/promise/observable) from data option of route, so that would not work by passing it in data option because it does stringify the data when you ask for data by doing this.routerData.get('socket').

I strongly recommend to use resolve option of route here. resolve method would return promise/observable

Code

@Injectable()
class SocketResolver implements Resolve {
  constructor(private socketService: socketService) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> {
    return this.socketService.connection();
  }
}

const routes: RouterConfig = [
    { path: '', component: AppComponent },
    { path: 'function1', component: Function1Component, 
       resolve: { socket: SocketResolver }
    }
];

Doc Link

score 0 · Answer 2 · answered Aug 11 '16 at 07:25

0

you should not involve routing in this. just create a service: https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

SocketService.ts

import { Injectable } from '@angular/core';

@Injectable()
export class SocketService {
  ...
}

and inject that service in your component or other services via the constructor:

constructor(private socketService:SocketService) { }

plus you make sure your service is intialized in the bootstrap process:

bootstrap(AppComponent, [  
    SocketService,
    ... ]);

on bootstrap, angular will create a single instance of your service which will be injected into every component which has it in its constructor, therefore you have access to the same socket service from everywhere you want.

answered Aug 11 '16 at 07:25

Oliver Renner

533
1
5
9

this sounds like it will work, how about if I want to edit variable inside another route component from a different route. – tony Aug 11 '16 at 22:40
Also what if some service only needs to be loaded on some routes, but not all. If I bootstrap it, will it use up memory on routes which the service is not needed? – tony Aug 11 '16 at 22:44
this service will be in your applications memory for the whole app-lifetime. the thing is, if you wanna have an open socket all the time, you need that. if you dont, you can inject the service only in the needed components via providers: [SocketService] in your @Component annotation.. be aware that this will cause new instances of your socketservice all the time. – Oliver Renner Aug 12 '16 at 06:43
if you wanna edit data from component A in component B or vice versa, you could use a share service (which is initialized in the bootstrap function) and store the data there. or if its a parrent-child component sort of thing, you might use event emitters https://angularjs.de/artikel/angular2-output-events – Oliver Renner Aug 12 '16 at 06:47

Angular 2 Passing object between routes

2 Answers2