Using service in app.routing.module Angular

Question

Is there a way to inject and use a service in the route list in the Angular routing module in order to dynamically change route data?

Like so:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyComponent } from './my/my.component';

const routes: Routes = [
  { path: 'about', component: AboutComponent, data: {title: myService.getTitle()}} // use it?
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
    constructor(private myService: SomeService) {} // inject it
}

How could I achieve dynamic behavior, like setting a custom title, in routes array?

deerawan · Accepted Answer · 2020-12-04 09:35:11Z

5

You probably want to take a look at Resolve

@Injectable({ providedIn: 'root' })
export class TitleResolver implements Resolve<Hero> {
  constructor(private service: TitleService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return this.service.getTitle();
  }
}

in router

const routes: Routes = [
  { 
     path: 'about', 
     component: AboutComponent, 
     resolve: { // use `resolve`
       title: TitleResolver
     } 
];

answered Dec 4, 2020 at 9:35

deerawan

8,5035 gold badges46 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dzenesiz Over a year ago

Great! Could you maybe also tell me if I can access route.data.someCustomProperty and use it in resolve? Currently, it is not present when resolve() triggers. I've looked online, but no luck.

deerawan Over a year ago

@dzenesiz hmm, seems that's not possible. How about storing that custom property in the service, then inject it into TitleResolver?

dzenesiz Over a year ago

I actually managed to pass data like this data: { myData: 'whatever} and then use it in resolver by accessing route.data.myData. I have just one more question, if that's okay - do I need to set the resolved value manually in component, or will title get set automatically? I'm asking because it seems it won't be automatic.

tbo47 · Accepted Answer · 2021-06-15 00:15:50Z

-1

you can access title in your routes

const routes = [
  { path: 'about', customData: myValue, component: AboutComponent, data: {title: myService.getTitle()}} // use it?
];

in any components or services with:

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(private router: Router) { };
  ...
  this.router.config[0].data.title;
  ...
}

answered Jun 15, 2021 at 0:15

tbo47

3,4793 gold badges23 silver badges13 bronze badges

Collectives™ on Stack Overflow

Using service in app.routing.module Angular

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related