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?

Answer 1

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
     } 
];

Answer 2

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;
  ...
}