로바토의 하루하루 (332) 썸네일형 리스트형 [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.. [angular] route and parameter const appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'users', component: UsersComponent }, { path: 'users/:id/:name', component: UserComponent }, { path: 'servers', component: ServersComponent }];we can see third one's path is little bit different.:id, :name is for the parameter. we can get the 'id' data like this.this.user = { id: this.route.snapshot.params['id'], name: t.. [angular] Router navigate relatively we know this last post,this.router.navigate(['/servers']); this is absolute path. but funny thing is this code. this.router.navigate(['servers']);this looks like relative path. but it is not, routerLink in html acts relatively with ['servers'] but navigate is not.(do not wonder why. just it works like that.) if you want to navigate relatively use this.this.router.navigate(['servers'], {relativeT.. [angular] Router Navigation programmatically To Navigate Router programmatically, We need this! constructor(private router:Router) { } and use it like this. this.router.navigate(['/servers']); *Don't forget '/server' is absolute path. [angular] routerLinkActive and routerLinkOptions Home -routerLinkActive = "XXX": 현재 주소가 routerLink와 같으면 XXX를 적용한다. -routerLinkActiveOptions: localhost/와 localhost/users는 다르지만, 앞에 localhost/가 붙어있기때문에, localhost/의 routerLinkActive는 항상 active상태일수밖에 없다. 이럴경우에 정확히 일치되는 주소만을 체크하기 위해서 routerLinkActiveOptions안에 exact: true옵션을 체크해준다. [angluar] routerLink with path currentPath: localhost/users Reload Page=> localhost/users/servers (just from current location) Reload Page=> localhost/servers (absolute) Reload Page=> localhost/servers (relative) [angular] href VS routerlink Home=> show the page with reloading Home=> show the page without reloading 이전 1 2 3 4 5 6 7 ··· 42 다음