はじめに
Angular アプリケーションは、最近非常に一般的です。これらは、Single Page Applications (SPA) の概念に基づいて構築されています。このようなアプリケーションでは、コンポーネントが使用されるため、ウェブページ間のルーティングは従来のウェブサイトとは異なります。Angularでは、アプリケーション全体をルーティングするためのナビゲーションに RouterLink を使用する必要があります。RouterLinkはディレクティブであり、コンポーネントクラス間でナビゲートするための Router.navigate および Router.navigateByURL メソッドを提供します。
このチュートリアルでは、以下の RouterLink, Router.navigate, および Router.navigateByURL について、コードの 例とともに見ていきます。.
RouterLink
HTMLでは、通常、以下のようにアンカータグ <a> を使用してリンクを挿入します。
|
1 2 3 |
<a href="/sample"> HTMLリンクの例。 </a> |
この例のリンクは、ユーザーを /sample ページに遷移させます。しかし、上述のように、シングルページアプリケーション（SPA）にはリンク先となる異なるページが存在しません。代わりに、ユーザーに表示する異なるビューやコンポーネントが存在します。
ユーザーがナビゲートしてビューを変更できるようにする必要がある場合は、 RouterLink ディレクティブを href:
|
1 2 3 |
<a routerLink="/users/example"> 文字列を使用するリンク。 </a> |
この RouterLink の例は、ユーザーを /users/example にあるコンポーネントに導きます。次の例のように、異なるURLセグメントを配列で渡すこともできます。
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> 配列を使用した リンク の例an array. </a> |
これら2つの例はフォーマットが異なりますが、宛先は同じ /users/example のコンポーネントになります。.
-
相対パス
RouterLinkでは相対URLを指定できます。また、 ../ を使用して、ナビゲーションのより上位のレベルに移動できます。これを実現する方法は以下の通りです。
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> 1つ上のレベルに移動するリンク。 </a> |
上記の例では、ユーザーが /users/posts にいる場合、ナビゲーションによって /posts/parent に移動します。。また、 ./, ../ を使用して相対的にURLを指定したり、必要に応じて先頭のスラッシュを省略したりすることもできます。
-
パラメーター
ルート間でデータを渡す必要があるシナリオが考えられます。簡単な例としては、ユーザーがフォームに入力し、詳細を入力するためにフォームの次の部分に遷移させる場合などです。
パラメーターを渡すには、データをカプセル化したオブジェクトをURLセグメントのリストに渡します。
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> パラメーター付きのリンク。 </a> |
上記では、 Router は /users;display=sample/xyz に遷移します。.
-
名前付きアウトレット
名前付きルーターアウトレットは、単に名前が付いたルーターアウトレットのことです。これに関するコードを見てみましょう。
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> サイドアウトレット付きのリンク。 </a> |
この例では、 xyz セグメントは side という名前のアウトレットに配置されます。以下のように、複数の名前付きアウトレットを指定することもできます。
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> 第1および第2アウトレット付きのリンク。 </a> |
これにより、 first セグメントが abc に置き換わり、 second セグメントが xyz に置き換わります。.
Router
Angularでは、 Router クラスは、ルートを定義し、それらの間を遷移するために使用されます。これは、次の2つのメソッドによって実現されます： Router.navigate と Router.navigateByUrl です。これら両方のメソッドは Promise を返します。この Promise は次の3つの値を持つことができます： true, false、または null.
-
値は、 true のとき、遷移が成功したことを示します。
-
値は、 null のとき、遷移が行われなかったことを示します。
-
そして、 false のとき、何らかの理由で遷移が失敗したことを示します。
アプリケーションでこれらのメソッドを使用できるようにするには、まずコンポーネントクラスに Router クラスをインポートする必要があります：
|
1 |
import { Router } from '@angular/router'; |
次に、この Router をコンストラクタの依存関係に注入する必要があります：
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
この設定により、アプリケーションで Router.navigate および Router.navigateByUrl メソッドを使用する準備が整いました。
Router.navigate
The Router.navigate メソッドは、URLセグメントの配列を受け取ります。基本的な Router.navigate コードの例を見てみましょう：
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
最後に、 Router.navigateByUrl について見てみましょう。このメソッドは Router.navigate に似ていますが、URLセグメントを受け取る代わりに、URLを指定する文字列を受け取ります。この遷移は絶対パスである必要があり、先頭に / が必要です：
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
上記のコードは、ユーザーを /users;all=true ページに遷移させます。
まとめ
このチュートリアルでは、RouterLinkを使用してAngularアプリを遷移する方法について説明しました。Angularアプリのルーティングは、シングルページアプリケーション（SPA）であるため、従来のWebアプリケーションとは少し異なります。RouterLinkとその機能を理解することは、開発者が堅牢なルーティングを構築するのに役立ちます。
Angularアプリは、ランタイムとして Node.js を使用します。Node.jsの詳細や、Node.jsアプリケーションのデプロイ方法について詳しく知りたい場合は、以下のチュートリアルを参照してください：
- Ubuntu 18.04にNode.jsをインストールする方法
- Node.jsアプリケーションのセットアップ：Ubuntu 20.04でNode.jsを使用して本番タスクを実行する方法
- Ubuntu 20.04でDockerを使用してNode.js (Express.js) アプリをデプロイする方法
Happy Computing!
コメント
コメントはまだありません。最初のコメントを投稿しましょう。