본문 바로가기

로바토의 하루하루

 (332)
[angular] Observable
[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] Outsourcing route config We can manage our route config separately from app.moudle.ts check this out! import { Routes, RouterModule } from "@angular/router";import { HomeComponent } from "./home/home.component";import { UsersComponent } from "./users/users.component";import { UserComponent } from "./users/user/user.component";import { ServersComponent } from "./servers/servers.component";import { ServerComponent } from ..
[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 ..

티스토리툴바