Angularルーター：RouterLink、Navigate、またはNavigateByUrlを使用したナビゲーション

序章

Angularでは、RouterLinkは別のルートを宣言的ににナビゲートするためのディレクティブです。 Router.navigateとRouter.navigateByURLは、コンポーネントクラスで必須をナビゲートするためにRouterクラスで使用できる2つのメソッドです。

RouterLink、Router.navigate、およびRouter.navigateByURLの使用方法を見てみましょう。

RouterLinkの使用

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>

これらの2つの例はフォーマットが異なりますが、/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に移動します。

名前付きアウトレット

Routerには、次のような名前のoutletに何を配置するかを指示できます。

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

この例では、sammyセグメントはsideという名前のoutletに配置されます。

Routerに、次のような名前の複数のoutletに何を配置するかを指示することもできます。

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

この例では、sammyセグメントはsideという名前のoutletに配置され、sharksセグメントはoutletに配置されます。 footerという名前。

ルーターの使用

AngularのRouterクラスでは、コンポーネントクラスで必須にナビゲートするためにRouter.navigateとRouter.navigateByUrlの2つのメソッドを使用できます。どちらの方法でも、ナビゲーションが成功した場合はtrue、ナビゲーションがない場合はnull、ナビゲーションが失敗した場合はfalse、エラーが発生した場合は完全に拒否されるpromiseが返されます。。

いずれかの方法を使用するには、最初に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を使用できます。

Router.navigate

URLセグメントの配列をRouter.navigateに渡します。

Router.navigateメソッドを使用した基本的な例を次に示します。

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

そして、これがRouter.navigateがthenableである方法を示す例です。

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が失敗すると、エラーが表示されます。

Router.navigateByUrl

Router.navigateByUrlはRouter.navigateに似ていますが、URLセグメントの代わりに文字列が渡される点が異なります。ナビゲーションは絶対的で、/で始まる必要があります。

Router.navigateByUrlメソッドを使用した基本的な例を次に示します。

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

この例では、Router.navigateByUrlは/users;display=verbose/sammyに移動します。

結論

この記事では、Angularアプリケーションでのナビゲーションについて学びました。 RouterLink、Router.navigate、Router.navigateByURLを紹介されました。

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。