반응형
Router를 정리하고 직접 구현에 적용해 보았습니다.
<ts.file>
app 모듈 등록시 '' path를 'localhost:4200'일 때만 적용하려면,
const appRoutes: Routes =
[
{ path: '', component: HomeComponent},
{ path: 'users', component: UsersComponent},
{ path: 'servers', component: ServersComponent},
];
path: '' 일경우, 아래와 같이 전체 경로 주소임을 나타내는 full을 추가해 준다.
{path: '', redirectTo: '/recipes', pathMatch: 'full'},동적경로를 추가 하고 싶을 때, :foo 와 같이 콜론(:)을 앞에 붙여 추가한다.
{path: ':id'}Route.navigate() 매쏘드 사용법 - from[localhost:4200/recipes] to[localhost:4200/recipes/0/edit]
id: number;
constructor(private router: Router,
private route: ActivatedRoute) { }
this.router.navigate(["/recipes", this.id, "edit"]) // 절대경로
this.router.navigate([this,id, "edit"], {relativeTo: this.route}) // 상대경로
this.router.navigate(["../", this,id, "edit"], {relativeTo: this.route}) // 한단계 이전 위치에서 상대경로 이동
<HTML>
routerLinkActive : 선택된 Element에 active class를 추가시켜줌으로써, css효과를 추가해 준다.
routerLink : /로 시작하지 않으면, 상대 주소기 때문에, 현 위치를 기준으로 아래 주소를 써주면 된다.
(ex: localhost:4200/recipes/0 으로 이동하는 링크 [현 위치: localhost:4200/recipes]의 child)
<a
style="cursor: pointer;"
[routerLink]="[index]"
routerLinkActive="active"
class="list-group-item clearfix">
<div class="pull-left">
<h4 class="list-group-item-heading">{{ recipe.name }}</h4>
<p class="list-group-item-text">{{ recipe.description }}</p>
</div>
<span class="pull-right">
<img
[src]="recipe.imagePath"
alt="{{ recipe.name }}"
class="img-responsive"
style="max-height: 50px;">
</span>
</a>
[routerLink]="[index]"는 자동적으로 localhost:4200/recipes/index로 이동하게 된다.
반응형
'프로그래밍 > Angular' 카테고리의 다른 글
| Handling Form - Template Driven (0) | 2019.07.02 |
|---|---|
| Observable & Subject (0) | 2019.06.26 |
| Routes (0) | 2019.06.17 |
| Providers - Hierarchical Injector (0) | 2019.06.16 |
| custom attribute Directive (0) | 2019.06.09 |