2018/03 (19) 썸네일형 리스트형 [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 [angular] Router 1. Register Routes In app.module.tsconst appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'users', component: UsersComponent }, { path: 'servers', component: ServersComponent }]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ]}) 2. Display Routes In XXX.html router-outlet is directive. Html: What is in the page.CSS: How to show the page.JavaScript: Functions in page. 이전 1 2 3 다음