Routing은 SPA인 Angular에서 중요한 기능중 하나이다.
비동기식 방식으로 화면을 전환하기 위해 탭과 같은 네비게이터를 이용하여 뷰의 한 구역만 전환해서, 하나의 화면에서 모든것을 해결할 수 있게 해준다.
실습은 tab 컴포넌트와 Router를 이용한 내용 전환과 ActivatedRoute를 이요하여 데이터를 넘기는 것까지 할것이다.
html컴포넌트는 material을 사용해준다.
1.RouterModule 기본
프로젝트 구조
category-home, category-list module을 만들어준다.
이 두 모듈을 탭으로 구성하여 화면에 출력해줄것이다.
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule } from '@angular/router'; import { MatTabsModule } from '@angular/material'; import { AppComponent } from './app.component'; import { CategoryHomeComponent } from './category-home/category-home.component'; import { CategoryListComponent } from './category-list/category-list.component'; @NgModule({ declarations: [ AppComponent, CategoryHomeComponent, CategoryListComponent ], imports: [ BrowserModule, BrowserAnimationsModule, RouterModule.forRoot([ {path:"category-home", component:CategoryHomeComponent}, {path:"category-list", component:CategoryListComponent}, {path:"", redirectTo:"/category-home", pathMatch:"full"} ]), MatTabsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } | cs |
material의 탭모듈이 사용되고,
RouterModule의 인자들을 잘 살펴보자.
인자는 배열로 이루어져 있고, 공통으로 path와 component를 갖고있다.
path는 url뒤에 붙는 경로를 의미하고, component는 그경로로 접근했을 때 뷰에 출력될 Component를 넣어준다.
path가 기본 root인 경우 /category-home으로 redirect하도록 설정해놨다.
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { categoryArray: any[]; activeCategoryIndex = 0; constructor() { this.categoryArray = [ {category: "홈", path:"category-home"}, {category: "과일목록", path:"category-list"} ] } } | cs |
categoryArray 배열의 category는 탭에 표시될 제목이고,
path는 url경로를 app.module.ts RouterModule의 path와 연결해줬다.
각 path는 동일해야한다.
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 | <nav mat-tab-nav-bar> <a mat-tab-link *ngFor="let category of categoryArray; let idx = index;" [routerLink] = "category.path" [active] = "activeCategoryIndex === idx" (click) = "activeCategoryIndex = idx" > {{ category.category }} </a> </nav> <router-outlet></router-outlet> | cs |
Router를 사용할때 html의 태그 property를 잘 확인해줘야한다.
routerLink : a태그 즉, 탭을 눌렀을때 출력될 url path를 넣어준다.
actiive : mat-tab-link를 사용할때, true일 경우 active, false인 경우 inactive
조건 문으로 activeCategoryIndex 변수와 ngFor를 이용해서 만들어진 index와 일치하는 경우에만 active.
현재 선택한 탭 이외의 뷰의 기능들을 숨기기 위해 사용된다.
click: 선택 되었을때 acticeCategoryIndex를 현재 클릭된 탭의 index로 바꿔주는 역할을 한다.
Router를 사용할때 선택된 모듈이 뷰에 출력해되는 부분이 router-outlet태그이다.
우리가 출력하고자하는 내용들이 router-outlet태그에 출력된다.
View
2.ActiveRoute 사용
tistory 블로거 분들은 이부분을 이해하기 더 편할것이다.
각 게시물마다 고유 글이 있다. 예를 들어 현재 이 글의 url을 보면 http://myjamong.tistory.com/32 이다.
뒤에 32라는 숫자는 이글의 id이다.
리스트에서 이 글을 보기위해 선택했을때 32번의 글을 출력할려고할때 32라는 데이터를 넘겨주는 작업을 하기위해 ActiveRoute를 사용해보자.
위에서 실습한 코드를 이어서 수정해본다.
프로젝트구조
category-list 내부에 category-list-item 모듈을 추가해준다.
list의 각각 item를 세부적으로 확인하기 위해 만들어 준다.
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule } from '@angular/router'; import { MatTabsModule, MatListModule, MatCardModule, MatButtonModule } from '@angular/material'; import { AppComponent } from './app.component'; import { CategoryHomeComponent } from './category-home/category-home.component'; import { CategoryListComponent } from './category-list/category-list.component'; import { CategoryListItemComponent } from './category-list/category-list-item/category-list-item.component'; @NgModule({ declarations: [ AppComponent, CategoryHomeComponent, CategoryListComponent, CategoryListItemComponent ], imports: [ BrowserModule, BrowserAnimationsModule, RouterModule.forRoot([ {path:"category-home", component:CategoryHomeComponent}, {path:"category-list", component:CategoryListComponent}, {path:"category-list/:id/:name", component:CategoryListItemComponent}, {path:"", redirectTo:"/category-home", pathMatch:"full"} ]), MatTabsModule, MatListModule, MatCardModule, MatButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } | cs |
위의 실습에서 조금더 추가되었다.
CategoryListItemComponent의 path를 보면 /:id/:name이 붙었는데, 이부분은 우리가 넘길 파라미터이다.
list.model.ts
1 2 3 | export class Fruit { constructor(public id: number, public name:string, public price: number){} } | cs |
Fruit라는 모델을 만들어준다.
construtor안에 public을 붙여주면, this.number = number와 같이 세팅작업을 자동으로 해준다.
category-list.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import { Component, OnInit } from '@angular/core'; import { Fruit } from './list.model'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-category-list', templateUrl: './category-list.component.html', styleUrls: ['./category-list.component.css'] }) export class CategoryListComponent implements OnInit { fruits: Fruit[] = [ new Fruit(1,'자몽',4000), new Fruit(2,'사과',5000), new Fruit(3,'수박',6000), new Fruit(4,'망고',7000), ]; constructor() { } ngOnInit() { } } | cs |
만든 모델을 html에서 사용해주기 위해 배열안에 넣어준다.
category-list.component.html
1 2 3 4 5 6 7 8 9 10 11 | <mat-list> <mat-card *ngFor="let fruit of fruits"> <mat-list-item> <strong>{{fruit.name}}</strong> </mat-list-item> <mat-list-item> {{fruit.price}}원 </mat-list-item> <button mat-raised-button color="primary" [routerLink]="[fruit.id,fruit.name]">check Id</button> </mat-card> </mat-list> | cs |
ngFor를 사용해서 배열안의 데이터들을 차례대로 출력을 해준다.
button을 눌렀을때 해당 데이터의 id값과 name값을 url에 붙여보낸다.
즉 [1,자몽]인 경우
해당 url : localhost:4200/category-list/1/자몽
이런 식의 경로로 이동된다.
category-list-item.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-category-list-item', templateUrl: './category-list-item.component.html', styleUrls: ['./category-list-item.component.css'] }) export class CategoryListItemComponent implements OnInit { constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.paramMap.subscribe(params => { console.log(params); let id: number = +params.get('id'); let name: string = params.get('name'); console.log(id + " " + name); }) } } | cs |
ActivatedRoute를 생성자의 인자로 선언해준다.
현재 active된 route를 감지하여 파라미터값을 전달받는다.
category-list 컴포넌트에서 필요한 데이터를 받아서 cateogry-list-item에서 id값으로 구분하여 item의 상세 내용을 작성해주면된다.
View
과일 목록 탭에서 버튼을 클릭했을때 콘솔창에 출력되는 내용과 url을 확인하면서 연습해본다.
댓글0