Non-Url options in Angular 2 Router

Question

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

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

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

And changing the state as follows:

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

On LOGIN_STATE, I was able to access this parameter:

 $stateParams.stateToRedirect; 

I am trying to find the same behavior for angular 2 Router, I understand that angular 2 Router has improved significantly, and we may not need to use ui-router-ng2.

So my question is: How do you reproduce the behavior described above in angular 2 Router?

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

Answer 1

The question you are asking is more about a component for linking components , not about routing as such. You need to transfer data from one component (associated with a specific route) to another component (associated with another route).

Component communication with components can be achieved in the following ways.

• Parent-child components can pass data through @Input () and @Output () decorators and event emitters

• Using the service . Components that do not share parent-child relationships that are in the same module can exchange data through services either using Observable sequences (having a producer-consumer model) or by setting data in variables and reading, respectively. This method can be extended to components located in different modules by registering the service using the root module (or the parent for both).

• Through the router. Data can be transmitted through the router as path parameters, for example: my/path/thisisapathvalue , optional parameters (using matrix notation), for example my/path;item=hello;item2=world or via query string parameters, for example my/path?item=hello&item2=world . You can also allow data for a specific component using allow protection , which either allow static data, data received from the server, permitted by functions, etc.

For your scenario, you most likely will need a Service that binds data between your source component and the final component, because even when using security devices to resolve the data, you will need an additional service for temporary storage of the data that you need to transfer.

Answer 2

As you said, the data key in each route can solve your case.

To summarize, Routes look like a huge tree and can be used as observables or as direct source data thanks to the snapshot key.

To show you an example

Maincompponent

 ngOnInit() { this.route.data.subscribe((data: any )=> { data.test = 'wassup'; }) } 

Childcomponent

 ngOnInit() { this.route.parent.data.subscribe((data: any )=> { console.log(data); }) /* or console.log(this.route.parent.snapshot.data) */ } 

Somewherecompponent

 ngOnInit() { this.route.root.children[0].data.subscribe((data: any )=> { console.log(data); }) } 

If you have an architecture of complex routes, I really recommend you the readerService code, which will go into the tree from the root or from anywhere and provide you with a whole map of parameters and all the necessary data.

Answer 3

This can be done using a route resolver, it will be a little more active 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

Sample video from Angular YouTube University Channel (non-affiliated)

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

Answer 4

You need to import RouterModule and Routes from @ angular / router.

  import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [{ path: 'login/:stateToRedirect', component: LoginComponent, }] 

In your component for example:

  import { ActivatedRoute, ParamMap } from '@angular/router'; @Component({})... export class LoginComponent(){ constructor(private route: ActivatedRoute){} private someFunction(){ this.route.paramMap .switchMap((params: ParamMap) =>{ console.log(params.get('stateToRedirect'); }); } 

you can get the parameters that are passed to this particular component using paramMap.

Answer 5

If both components belong to the same module, do you consider using the service? Add the model (or parameters) to the service, enter it as a dependency in both components, set its value in one component and extract it to other components.

=== Update ==

It is possible to use the skipLocationChange option

customers.component.ts

 this.router.navigateByUrl("/customers/details/1",{skipLocationChange:true}); 

and in detail, remove it as shown below

 selectedCustId:string="" ngOnInit() { this.route.paramMap.subscribe((params:ParamMap)=>this.selectedCustId=params.get('id')) }