본문 바로가기

Angular

 (14)
[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 { constructor(private serversService:ServersService){} resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable|Promise|Server{ return this.serversServic..
[angular] passing static data to route. We can set the static data in route.moduleconst 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 }, { path: ':id/edit', component: EditServerCom..
[angular] authGuard, canActivate, canActivateChild We can make the guard like this.@Injectable() =>this is for authServiceexport class AuthGuard implements CanActivate, CanActivateChild { constructor(private authService: AuthService, private router: Router) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean { return this.authService.isAuthenticated() .then( (authenticated: boolean) => { if ..
[angular] redirecting and wildcard if there is access from the path which you don't declare. hmm...like localhost:4200/somethingit could be error. You can not cover all other path.but don't worry, you can use wildcard to solve this problem.check this code!const appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'users', component: UsersComponent, children: [ { path: ':id/:name', component: UserComponent } ]}, {..
[angular] Handling queryParams We can navigate to edit component with this code.this.router.navigate(['edit'],{relativeTo: this.route}); but here is my question.How to preserve the queryParams?It is simple!. look at this one.this.router.navigate(['edit'],{relativeTo: this.route, queryParamsHandling: 'preserve'}); just Add queryParamsHandling with preserve.
[angular] router nested we can make nested router.const appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'users', component: UsersComponent, children: [ { path: ':id/:name', component: UserComponent } ]}, { path: 'servers', component: ServersComponent, children: [ { path: ':id', component: ServerComponent }, { path: ':id/edit', component: EditServerComponent } ]}]; looks pretty good! but it is not ..
[angular] retrieve the data as number this code looks like no problem. but actually it could be error.this.route.params.subscribe( (params:Params) => { this.server = this.serversService.getServer(params['id']); } );let's look at this method. >> getServer(id:number)the parameter of getserver is for 'number' but the data from route.params is always string. so it makes the error.we can fix this with just one typing of '+''+' cast the v..
[angular] QueryParameters and Fragments set in html {{ server.name }} set in ts codethis.router.navigate( ['/servers', id, 'edit'], {queryParams: {allowEdit: '1'}, fragment:'loading'}); retrieve query paramsconsole.log(this.route.snapshot.queryParams); console.log(this.route.snapshot.fragment); this.route.queryParams.subscribe( (params:Params) => { console.log(params['id']); } ); this.route.fragment.subscribe( (frag:string) => { conso..

티스토리툴바