[angular] dynamic data with resolver

Make resolver for dynamic data. (resolver is actually service, don't forget add service in provider) 

interface Server {

id: number;

name: string;

status: string;

}

@Injectable()

export class ServerResolver implements Resolve<Server> {

constructor(private serversService:ServersService){}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):

Observable<Server>|Promise<Server>|Server{

return this.serversService.getServer(+route.params['id']);

}

}

and setting in routing.module

const appRoutes: Routes = [

{ path: '', component: HomeComponent },

{ path: 'users', component: UsersComponent, children: [

{ path: ':id/:name', component: UserComponent }

]},

{ path: 'servers', canActivateChild: [AuthGuard], component: ServersComponent, children: [

{ path: ':id', component: ServerComponent, resolve: {server: ServerResolver}},

{ path: ':id/edit', component: EditServerComponent, canDeactivate:[CanDeactivateGuard]}

]},

//{path: 'not-found', component: PageNotFoundComponent},

{path: 'not-found', component: ErrorPageComponent, data: {message: 'Page not found!'}},

{path: '**', redirectTo: '/not-found'}

];

 

resolve: {server: ServerResolver} => 'server' is to be key when retrieving the data

this is the code for getting the data before routing

ngOnInit() {

this.route.data.subscribe(

(data:Data) => {

this.server = data['server'];

}

); 

resolve put our data in 'data' in route.

resolver는 라우트되기전에 테이타를 처리하기 위해서 사용.