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

投稿日: 2022-04-20 2022-10-15
タグ: Angular

序章

Angularでは、 RouterLink 別のルート宣言的にナビゲートするためのディレクティブです。 Router.navigate と Router.navigateByURL 利用可能な2つの方法です Router コンポーネントクラスで必須をナビゲートするクラス。

使い方を探りましょう RouterLink, Router.navigate、と Router.navigateByURL.

RouterLinkの使用

HTMLの一般的なリンクは次のようになります。

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

このリンク例は、ユーザーを /example ページ。

ただし、シングルページアプリケーション（SPA）には、リンクする別のページはありません。代わりに、ユーザーに表示するさまざまなビューがあります。ユーザーがナビゲートしてビューを変更できるようにするには、 RouterLink の代わりにディレクティブ href:

<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 セグメントはに配置されます outlet 名前付き side.

伝えることも可能です Router 複数の名前で何を配置するか outlets次のようなもの：

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

この例では、 sammy セグメントはに配置されます outlet 名前付き side そしてその sharks セグメントはに配置されます outlet 名前付き footer.

ルーターの使用

Angularで利用できる方法は2つあります Router コンポーネントクラスで必須にナビゲートするクラス： Router.navigate と Router.navigateByUrl. どちらのメソッドも、次のように解決されるpromiseを返します。 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.

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トピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036