[Angular] 앵귤러 RouterModule 사용 및 실습 :: 마이자몽

Routing은 SPA인 Angular에서 중요한 기능중 하나이다.

비동기식 방식으로 화면을 전환하기 위해 탭과 같은 네비게이터를 이용하여 뷰의 한 구역만 전환해서, 하나의 화면에서 모든것을 해결할 수 있게 해준다.

실습은 tab 컴포넌트와 Router를 이용한 내용 전환과 ActivatedRoute를 이요하여 데이터를 넘기는 것까지 할것이다.

html컴포넌트는 material을 사용해준다.

1.RouterModule 기본

프로젝트 구조

category-home, category-list module을 만들어준다.

이 두 모듈을 탭으로 구성하여 화면에 출력해줄것이다.

app.module.ts

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 { }

material의 탭모듈이 사용되고,

RouterModule의 인자들을 잘 살펴보자.

인자는 배열로 이루어져 있고, 공통으로 path와 component를 갖고있다.

path는 url뒤에 붙는 경로를 의미하고, component는 그경로로 접근했을 때 뷰에 출력될 Component를 넣어준다.

path가 기본 root인 경우 /category-home으로 redirect하도록 설정해놨다.

app.component.ts

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"}
    ]
  }
}

categoryArray 배열의 category는 탭에 표시될 제목이고,

path는 url경로를 app.module.ts RouterModule의 path와 연결해줬다.

각 path는 동일해야한다.

app.component.html

<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>

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

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 { }

위의 실습에서 조금더 추가되었다.

CategoryListItemComponent의 path를 보면 /:id/:name이 붙었는데, 이부분은 우리가 넘길 파라미터이다.

list.model.ts

export class Fruit {
    constructor(public id: number, public name:string, public price: number){}
}

Fruit라는 모델을 만들어준다.

construtor안에 public을 붙여주면, this.number = number와 같이 세팅작업을 자동으로 해준다.

category-list.component.ts

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() {
  }
 
}

만든 모델을 html에서 사용해주기 위해 배열안에 넣어준다.

category-list.component.html

<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>

ngFor를 사용해서 배열안의 데이터들을 차례대로 출력을 해준다.

button을 눌렀을때 해당 데이터의 id값과 name값을 url에 붙여보낸다.

즉 [1,자몽]인 경우

해당 url : localhost:4200/category-list/1/자몽

이런 식의 경로로 이동된다.

category-list-item.component.ts

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);
    })
  }
 
}

ActivatedRoute를 생성자의 인자로 선언해준다.

현재 active된 route를 감지하여 파라미터값을 전달받는다.

category-list 컴포넌트에서 필요한 데이터를 받아서 cateogry-list-item에서 id값으로 구분하여 item의 상세 내용을 작성해주면된다.

View

과일 목록 탭에서 버튼을 클릭했을때 콘솔창에 출력되는 내용과 url을 확인하면서 연습해본다.

저작자표시