UnderStanding Resolver In Angular 8

Posted By : Bhuvan Chawla | 30-Apr-2020

An Every important thing is in Angular, the resolver is also a class. In fact, Resolver is a service that has been [provided] in the root module.

Understanding the need of resolver so let gets started

How routes normally work

The user clicks on the respective link.
Angular loads the component based on routes.

How Routing flow run with Resolver

When a user clicks on the set routes button
Angular execute certain parts of the code and returns a value or observable.
You can collect the returned value or as an observable in a constructor or in ngOnInit,or as per your suggested life cycle hook in the class of your component which is to load.
Use the data in your component or pass to another service where you want to you can use this data.
Now you can load your component.

In meanwhile resolver is that midway code, which can be u executed when a routes link has been clicked and before a component is loaded they provide data before loading the component when you need a specif data before loading the component so you can use resolver.

So lets see How to implement resolver in angular code

1. Creating a service the name of the service is resolver_test

2. Import “Resolve” interface from ‘@angular/router’.

3.Implement the rosolver with given class

4.Override resolve() method

5.Resolver method should have 2 parameter first is routesnapshot and the one more is statesnapshot

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

import { Resolve,ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';

import {Http} from '@angular/http';

@Injectable({

providedIn: 'root'

})

export class Resolver implements Resolve<any>{

constructor() { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

console.log('printing the collected route parameter',route.params['name'])

return this.http.get('http://xyz.com')

}

In above we are getting the value from params using this rosolve class you can see we implemented this with the class and the provide me the method for calling in another service file

Defining the resolver in routing file

Import {Resolver} from './resolver.service';

{

path:'two/name'

component:Xyz

resolve:{

DataObj:Resolver. ----> DataObj is the key in the object they hold the value
}
}

@NgModule({

providers:[Resolver]. -----> now the service has been added in the provider

})

Now Call the ActivatedRoute in Component in constructor

Constructor(private currentRoute:ActivatedRoute){