Angular의 라우터 링크

Angular에서 routerLink 방법을 소개하고 이 방법을 탐색에 사용할 것입니다.

Angular의 라우터 링크

탐색은 웹 응용 프로그램이나 웹 사이트에서 가장 중요한 부분 중 하나입니다. 단 하나의 페이지로 단일 페이지 애플리케이션(SPA)을 생성하는 경우에도 여전히 탐색을 사용하여 섹션에서 섹션으로 이동합니다.

탐색을 통해 사용자는 웹 응용 프로그램에서 원하는 것을 쉽게 찾을 수 있습니다. 간단하고 이해하기 쉬운 탐색을 제공하여 응용 프로그램을 사용자 친화적이고 사용하기 쉽게 만들 수 있습니다.

Angular는 단순한 라우팅에서 복잡한 라우팅까지 쉽게 수행할 수 있도록 탐색을 위한 다양한 방법을 제공합니다. Angular는 웹 애플리케이션에서 탐색을 설정하기 위해 RouterModule이라는 별도의 모듈을 제공합니다.

SPA(단일 페이지 응용 프로그램)에는 연결할 다른 페이지가 없지만 다른 보기를 표시합니다. 일반적으로 아래와 같이 HTML을 사용하여 링크를 표시합니다.

# angular
<a href="/link">
  Example link in HTML.
</a>

Angular는 아래와 같이 href 대신 사용할 수 있는 routerLink 지시문을 제공합니다.

# angular
<a routerLink="/home">
  Link Name.
</a>

routerLink를 사용하는 방법은 아래와 같이 2가지가 있는데 하나는 문자열로 사용하고 다른 하나는 배열로 사용합니다.

# angular
<a routerLink="/home">
  Link used as a string.
</a>
<a [routerLink]="['/', 'user', 'fakhar']">
  Link used as an array.
</a>

[routerLink]는 링크에 매개변수를 전달할 때 사용하고 routerLink는 링크를 원할 때 사용합니다. routerLink를 사용하여 다른 구성 요소를 탐색하는 예를 살펴보겠습니다.

다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.

# angular
ng new my-app

Angular에서 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

모든 종속성이 올바르게 설치되었는지 확인하기 위해 앱을 실행해 보겠습니다.

# angular
ng serve --open

명령을 사용하여 구성 요소를 생성합니다. 먼저 home 구성 요소를 생성합니다.

# angular
ng generate component home

home 구성 요소를 생성했으면 about 구성 요소를 생성합니다.

# angular
ng generate component about

마지막으로 다음 명령을 사용하여 services 구성 요소를 생성합니다.

# angular
ng generate component services

구성 요소를 생성한 후에는 3개의 파일이 있는 별도의 폴더에 3개의 구성 요소가 있습니다.

출력:

구성 요소를 생성했으면 뷰를 생성합니다. 먼저 about 폴더에서 about.component.html을 열고 다음 코드를 추가합니다.

# angular
<div class="container" >
  <h1> This is about Component </h1>
  <h3> Try navigating to other components </h3>
</div>

home 폴더에서 home.component.html 파일을 열고 다음 코드를 추가합니다.

# angular
<div class="container">
 <h1> This is home component </h1>
 <h3> Try navigating to other components </h3>
</div>

services 폴더에서 services.component.html 파일을 열고 다음 코드를 추가합니다.

# angular
<div class="container">
 <h1> This is Services component </h1>
 <h3> Try navigating to other components </h3>
</div>

구성 요소와 보기가 준비되면 app-routing.module.ts에서 경로를 정의합니다. ngModule을 가져올 것입니다.

또한 router에서 Routes 및 RouterModule을 가져오고 생성된 구성 요소를 가져옵니다.

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

모든 것을 가져오면 아래와 같이 구성 요소에 대한 경로를 정의합니다.

# angular
const routes: Routes = [

    { path: 'about', component: AboutComponent },
    { path: 'home', component: HomeComponent},
    { path: 'services', component: ServicesComponent },
 ];

app.component.html에 탐색 메뉴를 만들 것입니다. routerLink를 사용하여 방금 정의한 경로에서 링크를 가져오고 router-outlet을 사용하여 구성 요소의 내용을 표시합니다.

<ul class="nav navbar-nav">
  <li>
    <a routerLink="/home">Home</a>
  </li>
  <li>
    <a routerLink="/about">About</a>
  </li>
  <li>
    <a routerLink="/services">Services</a>
  </li>
</ul>

<router-outlet> </router-outlet>

출력:

위의 예는 routerLink를 사용하고 경로를 정의하여 한 구성 요소에서 다른 구성 요소로 쉽게 이동할 수 있음을 보여줍니다.

그래서 이 튜토리얼에서는 구성 요소를 생성하고 경로를 정의하는 방법, routerLink를 사용하여 구성 요소 사이를 쉽게 탐색하는 방법, routerLink 및 [routerLink]를 사용하는 방법을 배웠습니다.

여기 데모