Resolve

Stable

Interface

What it does

Interface that class can implement to be a data provider.

How to use

  1. class Backend {
  2. fetchTeam(id: string) {
  3. return 'someTeam';
  4. }
  5. }
  6. @Injectable()
  7. class TeamResolver implements Resolve<Team> {
  8. constructor(private backend: Backend) {}
  9. resolve(
  10. route: ActivatedRouteSnapshot,
  11. state: RouterStateSnapshot
  12. ): Observable<any>|Promise<any>|any {
  13. return this.backend.fetchTeam(route.params.id);
  14. }
  15. }
  16. @NgModule({
  17. imports: [
  18. RouterModule.forRoot([
  19. {
  20. path: 'team/:id',
  21. component: TeamCmp,
  22. resolve: {
  23. team: TeamResolver
  24. }
  25. }
  26. ])
  27. ],
  28. providers: [TeamResolver]
  29. })
  30. class AppModule {}

You can alternatively provide a function with the resolve signature:

  1. @NgModule({
  2. imports: [
  3. RouterModule.forRoot([
  4. {
  5. path: 'team/:id',
  6. component: TeamCmp,
  7. resolve: {
  8. team: 'teamResolver'
  9. }
  10. }
  11. ])
  12. ],
  13. providers: [
  14. {
  15. provide: 'teamResolver',
  16. useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => 'team'
  17. }
  18. ]
  19. })
  20. class AppModule {}

Interface Overview

interface Resolve {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<T>|Promise<T>|T

}

Interface Description

Interface Details

exported from @angular/router/index, defined in @angular/router/src/interfaces.ts