Angular (14) 썸네일형 리스트형 [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옵션을 체크해준다. [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 다음