본문 바로가기

IT

[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는 라우트되기전에 테이타를 처리하기 위해서 사용.


태그