Angular 라우터: RouterLink, Navigate 또는 NavigateByUrl을 사용한 탐색

소개

Angular에서 RouterLink는 선언적으로 다른 경로로 이동하기 위한 지시어입니다. Router.navigate 및 Router.navigateByURL은 Router 클래스가 구성 요소 클래스에서 명령적으로 탐색할 수 있는 두 가지 방법입니다. .

RouterLink, Router.navigate 및 Router.navigateByURL을 사용하는 방법을 살펴보겠습니다.

라우터링크 사용

HTML의 일반적인 링크는 다음과 같습니다.

<a href="/example">
  Example HTML link.
</a>

이 예제 링크는 사용자를 /example 페이지로 안내합니다.

그러나 단일 페이지 애플리케이션(SPA)에는 연결할 다른 페이지가 없습니다. 대신 사용자에게 표시할 다른 보기가 있습니다. 사용자가 보기를 탐색하고 변경할 수 있도록 하려면 href 대신 RouterLink 지시문을 사용하는 것이 좋습니다.

<a routerLink="/users/sammy">
  Link that uses a string.
</a>

이 RouterLink 예제는 사용자를 /users/sammy의 구성 요소로 안내합니다.

다른 URL 세그먼트는 다음과 같은 배열로 전달될 수도 있습니다.

<a [routerLink]="['/', 'users', 'sammy']">
  Link that uses an array.
</a>

이 두 예제는 형식이 다르지만 /users/sammy의 동일한 구성 요소로 지정됩니다.

상대 경로

다음과 같이 ../를 사용하여 탐색에서 더 높은 수준으로 이동할 수 있습니다.

<a [routerLink]="['../', 'posts', 'sammy']">
  Link that goes up a level.
</a>

이 예에서 사용자가 /users/sammy에 있으면 탐색이 /posts/sammy 로 변경됩니다. .

첫 번째 URL 세그먼트 앞에 ./, ../를 추가하거나 선행 슬래시를 추가하지 않을 수 있습니다.

매개변수

URL 세그먼트 목록에 있는 객체를 사용하여 탐색에 매개변수를 전달할 수 있습니다.

<a [routerLink]="['/', 'users', {display: 'verbose'}, 'sammy']">
  Link with parameter.
</a>

이 예에서 Router는 /users;display=verbose/sammy로 이동합니다.

명명된 콘센트

다음과 같이 이름이 지정된 outlet에 배치할 항목을 Router에 알릴 수 있습니다.

<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'] } }]">
  Link with a side outlet.
</a>

이 예에서 sammy 세그먼트는 side라는 이름의 콘센트에 배치됩니다. .

다음과 같이 이름이 지정된 여러 outlet에 무엇을 배치할지 Router에 알릴 수도 있습니다.

<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'], footer: ['sharks'] } }]">
  Link with a side and footer outlets.
</a>

이 예에서 sammy 세그먼트는 side라는 이름의 콘센트에 배치됩니다. sharks 세그먼트는 footer라는 outlet에 배치됩니다.

라우터 사용

구성 요소 클래스에서 명령적으로 탐색하기 위해 Angular의 Router 클래스에서 사용할 수 있는 두 가지 메서드는 Router.navigate 및 Router.navigateByUrl입니다. 두 메서드 모두 탐색이 성공하면 true로 확인되고, 탐색이 없으면 null로, 탐색이 실패하면 false로 확인되는 약속을 반환합니다. 오류가 있으면 완전히 거부됩니다.

두 방법 중 하나를 사용하려면 먼저 Router 클래스가 구성 요소 클래스에 삽입되었는지 확인해야 합니다.

먼저 Router를 구성 요소 클래스로 가져옵니다.

import { Component } from '@angular/core';
import { Router } from '@angular/router';

그런 다음 종속 항목에 Router를 추가합니다.

@Component({
  // ...
})
export class AppComponent {

  constructor(private router: Router) {
    // ...
  }

  // ...
}

이제 Router.navigate 또는 Router.navigateByUrl을 사용할 수 있습니다.

라우터.탐색

URL 세그먼트 배열을 Router.navigate에 전달합니다.

다음은 Router.navigate 메서드를 사용하는 기본 예입니다.

goPlaces() {
  this.router.navigate(['/', 'users']);
}

다음은 Router.navigate가 어떻게 가능한지를 보여주는 예입니다.

goPlaces() {
  this.router.navigate(['/', 'users'])
    .then(nav => {
      console.log(nav); // true if navigation is successful
    }, err => {
      console.log(err) // when there's an error
    });
}

이 예에서 Router.navigate가 성공하면 true가 표시됩니다. 이 예에서 Router.navigate가 실패하면 오류가 표시됩니다.

라우터.navigateByUrl

Router.navigateByUrl은 URL 세그먼트 대신 문자열이 전달된다는 점을 제외하면 Router.navigate와 유사합니다. 탐색은 절대적이어야 하며 /로 시작해야 합니다.

다음은 Router.navigateByUrl 메서드를 사용하는 기본 예입니다.

goPlaces() {
  this.router.navigateByUrl('/users;display=verbose/sammy');
}

이 예에서 Router.navigateByUrl은 /users;display=verbose/sammy로 이동합니다.

결론

이 기사에서는 Angular 애플리케이션의 탐색에 대해 배웠습니다. RouterLink, Router.navigate 및 Router.navigateByURL을 소개받았습니다.

Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하십시오.