Non-Url Parameters in Angular 2 Router

Question

In angular 1.*, I was using ui-router and was able to pass NON URL Parameters from one state to another. By NON URL Parameter, I mean passing some parameters that does NOT appear on the URL (so completely transparent for the user).

The way to do this in Angular 1.* was by defining a state like this (stateToRedirect is the non-url parameter)

   $stateProvider
    .state('LOGIN_STATE', {
      url: `login`,
      component: 'login',
      params: {
        stateToRedirect: 'home'
      }
    });

And changing state like this:

  $state.go('LOGIN_STATE', {
    stateToRedirect: 'OTHER_STATE',
  });

In the LOGIN_STATE, I was able to access this parameter doing this:

$stateParams.stateToRedirect;

I'm trying to find the same behaviour for Angular 2 Router, my understanding is that Angular 2 Router has improved a lot and we might not need to use ui-router-ng2.

So my question is: How do you reproduce the above behaviour in Angular 2 Router ?

This question seemed to be what I wanted but I don't want paramter in the URL and the 'data' property on the route seems good but I can't find documentation on how to set it dynamically.

Answer 1

The question you are asking is more about component to component communication rather than routing per se. What you require is to pass data from one component (associated with a particular route), to another component (associated with another route).

Component to component communication can be achieved in the following ways

1. Components having parent-child relationship can pass data via @Input() and @Output() decorators and event emitters

2. Via the use of a service. Components not sharing a parent-child relationship residing in the same module can share data via services, either via the use of Observable sequences (having a producer-consumer model) or by setting data in variables and read accordingly. This method can be extended to components residing in different modules by registering the service with the root (or parent to both) module.

3. Via the router. Data can be passed via the router as path parameters eg: my/path/thisisapathvalue, optional parameters (using matrix notation), eg my/path;item=hello;item2=world or via query string paramters eg my/path?item=hello&item2=world. You can also resolve data for a particular component by using resolve guards which either resolve static data, data retrieved from a server, resolved via functions etc.

For your scenario, what you most likely need is a Service which communicates data between your source component to the destination component, since even by using resolve guards to resolve the data, you're going to need an additional service to temporary store the data that you need to pass.

Answer 2

It is possible to do this using a route resolver, it will be a little more involved than your AngularJs implementation but should allow you to do what you want.

Angular documentation

https://angular.io/guide/router#resolve-pre-fetching-component-data

Video example from Angular University YouTube channel (no affiliation)

https://www.youtube.com/watch?v=6xmCNfPP90E