Angularアプリ内ナビゲーション:ビューへのルーティングの例
Angular App Navigation
シングルページアプリでは、サーバーにアクセスして新しいページを取得するのではなく、特定のコンポーネントに対応するディスプレイの部分を表示または非表示にすることで、ユーザーに表示される内容を変更します。ユーザーがアプリケーションタスクを実行するとき、ユーザーは異なる間を移動する必要があります ビュー あなたが定義したこと。
1つからのナビゲーションを処理するには 見る 次に、Angularを使用します ルーター
。 NS ルーター
ブラウザのURLをビューを変更するための指示として解釈することにより、ナビゲーションを有効にします。
ルーターの主な機能を備えたサンプルアプリについては、実際の例をご覧ください。
前提条件
ルートを作成する前に、次のことをよく理解しておく必要があります。
- コンポーネントの基本
- テンプレートの基本
- Angularアプリ-を使用して基本的なAngularアプリを生成できます Angular CLI 。
既製のアプリを使用したAngularの概要については、を参照してください。 入門 。 Angularアプリの構築に関するより詳細なエクスペリエンスについては、 英雄のツアー チュートリアル。どちらも、コンポーネントクラスとテンプレートの使用方法をガイドします。
ルーティングを有効にしてアプリを生成する
次のコマンドは、Angular CLIを使用して、と呼ばれるアプリルーティングモジュールを備えた基本的なAngularアプリを生成します。AppRoutingModuleは、ルートを構成できるNgModuleです。次の例のアプリ名は次のとおりです。
ルーティングアプリ。
ng new routing-app --routing
新しいアプリを生成するとき、CLIはCSSまたはCSSプリプロセッサを選択するように求めます。この例では、デフォルトのCSS。
ルーティング用のコンポーネントの追加
Angularルーターを使用するには、アプリが1つから別のコンポーネントに移動できるように、少なくとも2つのコンポーネントが必要です。 CLIを使用してコンポーネントを作成するには、コマンドラインで次のように入力します。最初はコンポーネントの名前です:
ng generate component first
2番目のコンポーネントに対してこの手順を繰り返しますが、別の名前を付けます。ここで、新しい名前は2番目。
ng generate component second
CLIは自動的に追加しますコンポーネント、だからあなたが書くとしたら
最初のコンポーネント、あなたのコンポーネントは
FirstComponentComponent。
このガイドは、CLIで生成されたAngularアプリで機能します。手動で作業している場合は、
の中に
index.htmlファイルの。これは、
appフォルダーはアプリケーションルートであり、
'/'。
新しいコンポーネントのインポート
新しいコンポーネントを使用するには、それらをにインポートします次のように、ファイルの先頭にあるAppRoutingModule:
import { FirstComponent } from './first/first.component'; import { SecondComponent } from './second/second.component';
基本ルートの定義
ルートを作成するには、3つの基本的な構成要素があります。
をインポートしますAppRoutingModuleに
AppModuleとそれをに追加します
配列をインポートします。
AngularCLIがこのステップを実行します。ただし、アプリを手動で作成する場合、または既存の非CLIアプリで作業する場合は、インポートと構成が正しいことを確認してください。以下はデフォルトですCLIを使用したAppModule
-ルーティングフラグ。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
-
輸入
RouterModuleと
ルーティングモジュールにルーティングします。
AngularCLIはこのステップを自動的に実行します。 CLIは、
ルートのルート配列と構成
輸入と
の配列をエクスポートします
@ NgModule()。
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; // CLI imports router const routes: Routes = []; // sets up routes constant where you define your routes // configures NgModule imports and exports @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
-
でルートを定義する
ルート配列。
この配列の各ルートは、2つのプロパティを含むJavaScriptオブジェクトです。最初のプロパティ、
pathは、ルートのURLパスを定義します。 2番目のプロパティ、
componentは、Angularが対応するパスに使用するコンポーネントを定義します。
const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, ];
-
アプリケーションにルートを追加します。
ルートを定義したので、それらをアプリケーションに追加できます。まず、2つのコンポーネントへのリンクを追加します。ルートを追加するアンカータグを割り当てます
routerLink属性。属性の値をコンポーネントに設定して、ユーザーが各リンクをクリックしたときに表示します。次に、コンポーネントテンプレートを更新して、
< router-outlet >。この要素は、選択したルートのコンポーネントでアプリケーションビューを更新するようにAngularに通知します。
<h1>Angular Router Apph1> <nav> <ul> <li><a routerLink='/first-component' routerLinkActive='active'>First Componenta>li> <li><a routerLink='/second-component' routerLinkActive='active'>Second Componenta>li> ul> nav> <router-outlet>router-outlet>
ルートの順序
ルートの順序は重要です。ルーターは、ルートを照合するときに最初の一致の勝ち戦略を使用するため、より具体的なルートは、あまり具体的でないルートの上に配置する必要があります。最初に静的パスを使用してルートをリストし、次にデフォルトルートと一致する空のパスルートをリストします。 NS ワイルドカードルート すべてのURLに一致し、
ルーターは、他のルートが最初に一致しない場合にのみそれを選択します。
ルート情報の取得
多くの場合、ユーザーがアプリケーションをナビゲートするときに、あるコンポーネントから別のコンポーネントに情報を渡したいと思うでしょう。たとえば、食料品の買い物リストを表示するアプリケーションについて考えてみます。リスト内の各アイテムには固有のものがありますid。アイテムを編集するには、ユーザーは[編集]ボタンをクリックします。これにより、
EditGroceryItemコンポーネント。そのコンポーネントでを取得する必要があります
ユーザーに適切な情報を表示できるように、食料品のID。
ルートを使用して、このタイプの情報をアプリケーションコンポーネントに渡すことができます。これを行うには、ActivatedRouteインターフェースを使用します。
ルートから情報を取得するには:
-
輸入
ActivatedRouteと
コンポーネントへのParamMap。
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
これらは
importステートメントは、コンポーネントに必要ないくつかの重要な要素を追加します。それぞれの詳細については、次のAPIページを参照してください。
-
ルーター
-
ActivatedRoute
-
ParamMap
-
-
のインスタンスを注入します
アプリケーションのコンストラクターに追加することによるActivatedRoute:
constructor( private route: ActivatedRoute, ) {}
-
を更新します
ngOnInit()メソッドにアクセスして
ActivatedRouteと追跡
idパラメーター:
ngOnInit() { this.route.queryParams.subscribe(params => { this.name = params['name']; }); }
注:前の例では、変数を使用しています。
名前を付け、それに基づいて値を割り当てます
名前パラメータ。
ワイルドカードルートの設定
正常に機能しているアプリケーションは、ユーザーがアプリケーションの存在しない部分に移動しようとしたときに、適切に処理する必要があります。この機能をアプリケーションに追加するには、ワイルドカードルートを設定します。 Angularルーターは、要求されたURLがどのルーターパスとも一致しない場合はいつでもこのルートを選択します。
ワイルドカードルートを設定するには、次のコードをに追加しますルート定義。
{ path: '**', component: }
2つのアスタリスク、**、これをAngularに示します
ルート定義はワイルドカードルートです。コンポーネントプロパティでは、アプリケーションで任意のコンポーネントを定義できます。一般的な選択肢には、アプリケーション固有のものが含まれます
PageNotFoundComponent、これを定義できます 404ページを表示する ユーザーに;または、アプリケーションのメインコンポーネントへのリダイレクト。ワイルドカードルートは、任意のURLと一致するため、最後のルートです。ルートの順序が重要である理由の詳細については、を参照してください。 ルートの順序 。
404ページを表示する
404ページを表示するには、 ワイルドカードルート とともに次のように、404ページに使用するコンポーネントに設定されたコンポーネントプロパティ:
const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page ];
との最後のルートのパス
**はワイルドカードルートです。要求されたURLがリストの前のパスのいずれとも一致しない場合、ルーターはこのルートを選択し、ユーザーをに送信します。
PageNotFoundComponent。
リダイレクトの設定
リダイレクトを設定するには、リダイレクト元のパス、
リダイレクト先のコンポーネント、および
URLを照合する方法をルーターに指示するpathMatch値。
const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, { path: '', redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component` { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page ];
この例では、3番目のルートはリダイレクトであるため、ルーターはデフォルトで最初のコンポーネントのルート。このリダイレクトはワイルドカードルートの前にあることに注意してください。ここ、
パス: ''は、最初の相対URLを使用することを意味します(
'')。
詳細についてはpathMatchを参照してください スポットライト
pathMatch
。
ネスティングルート
アプリケーションがより複雑になるにつれて、ルートコンポーネント以外のコンポーネントに相対的なルートを作成したい場合があります。これらのタイプのネストされたルートは、子ルートと呼ばれます。これは、2番目を追加していることを意味します< router-outlet >それはあなたのアプリに追加されているので、
< router-outlet >の
AppComponent。
この例では、2つの追加の子コンポーネントがあります。子-a、および
子供-b。ここ、
FirstComponentには独自の機能があります
そして2番目
< router-outlet >に加えて
AppComponent。
<h2>First Componenth2> <nav> <ul> <li><a routerLink='child-a'>Child Aa>li> <li><a routerLink='child-b'>Child Ba>li> ul> nav> <router-outlet>router-outlet>
子ルートは、他のルートと同じように、両方が必要です。パスと
成分。 1つの違いは、子ルートを
親ルート内の子配列。
const routes: Routes = [ { path: 'first-component', component: FirstComponent, // this is the component with the in the template children: [ { path: 'child-a', // child route path component: ChildAComponent, // child route component that the router renders }, { path: 'child-b', component: ChildBComponent, // another child route component that the router renders }, ], }, ];
相対パスの使用
相対パスを使用すると、現在のURLセグメントに相対的なパスを定義できます。次の例は、別のコンポーネントへの相対ルートを示しています。2番目のコンポーネント。
FirstComponentと
SecondComponentはツリーの同じレベルにありますが、
SecondComponentは内にあります
FirstComponentは、ルーターがレベルを上げてから2番目のディレクトリに移動して
SecondComponent。到達するためのパス全体を書き出すのではなく
SecondComponent、あなたは使用することができます
../レベルを上げるための表記。
<h2>First Componenth2> <nav> <ul> <li><a routerLink='../second-component'>Relative Route to second componenta>li> ul> nav> <router-outlet>router-outlet>
に加えて../、あなたは使うことができます
./または現在のレベルを指定するためのスラッシュなし。
相対ルートの指定
相対ルートを指定するには、NavigationExtras
relatedToプロパティ。コンポーネントクラスで、インポート
からのNavigationExtras
@ angular / router。
次に、ナビゲーションメソッドのrelativeTo。ここに含まれているリンクパラメータ配列の後
アイテム、オブジェクトを追加します
に設定されたrelativeToプロパティ
ActivatedRoute、つまり
this.route。
goToItems() { this.router.navigate(['items'], { relativeTo: this.route }); }
NSgoToItems()メソッドは、宛先URIをアクティブ化されたルートに関連するものとして解釈し、
アイテムルート。
クエリパラメータとフラグメントへのアクセス
アプリケーションの機能で、クエリパラメータやフラグメントなどのルートの一部にアクセスする必要がある場合があります。チュートリアルのこの段階のTourof Heroesアプリは、ヒーローをクリックして詳細を表示できるリストビューを使用します。ルーターは正しいヒーローの詳細を表示するためのID。
まず、ナビゲートするコンポーネントに次のメンバーをインポートします。
import { ActivatedRoute } from '@angular/router'; import { Observable } from 'rxjs'; import { switchMap } from 'rxjs/operators';
次に、アクティブ化されたルートサービスを挿入します。
constructor(private route: ActivatedRoute) {}
監視可能なクラスができるようにクラスを構成します。ヒーローズ$、
保持するselectedId
ヒーローのID番号、およびヒーロー
ngOnInit()、次のコードを追加して、
選択したヒーローのID。このコードスニペットは、Tour of Heroesの例と同様に、ヒーローリスト、ヒーローサービス、ヒーローを取得する関数、リストと詳細をレンダリングするHTMLがあることを前提としています。
heroes$: Observable; selectedId: number; heroes = HEROES; ngOnInit() { this.heroes$ = this.route.paramMap.pipe( switchMap(params => { this.selectedId = Number(params.get('id')); return this.service.getHeroes(); }) ); }
次に、移動先のコンポーネントで、次のメンバーをインポートします。
import { Router, ActivatedRoute, ParamMap } from '@angular/router'; import { Observable } from 'rxjs';
注入するActivatedRouteと
コンポーネントクラスのコンストラクター内のルーター。このコンポーネントで使用できるようにします。
hero$: Observable; constructor( private route: ActivatedRoute, private router: Router ) {} ngOnInit() { const heroId = this.route.snapshot.paramMap.get('id'); this.hero$ = this.service.getHero(heroId); } gotoItems(hero: Hero) { const heroId = hero ? hero.id : null; // Pass along the hero id if available // so that the HeroList component can select that item. this.router.navigate(['/heroes', { id: heroId }]); }
遅延読み込み
遅延ロードモジュールへのルートを構成できます。つまり、Angularは、アプリの起動時にすべてのモジュールをロードするのではなく、必要に応じてモジュールをロードするだけです。さらに、アプリの一部をバックグラウンドでプリロードして、ユーザーエクスペリエンスを向上させることができます。
遅延読み込みと事前読み込みの詳細については、専用ガイドを参照してください NgModuleの遅延読み込み 。
不正アクセスの防止
ルートガードを使用して、ユーザーが許可なくアプリの一部に移動できないようにします。次のルートガードがAngularで利用できます。
-
CanActivate
-
CanActivateChild
-
CanDeactivate
-
解決
-
CanLoad
ルートガードを使用するには、コンポーネントのないルートの使用を検討してください。これにより、子ルートのガードが容易になります。
警備員のためのサービスを作成します。
ng generate guard your-guard
ガードクラスで、使用するガードを実装します。次の例では、CanActivateを使用して、ルートを保護します。
export class YourGuard implements CanActivate { canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { // your logic goes here } }
ルーティングモジュールで、適切なプロパティを使用しますルート構成。ここ、
canActivateは、この特定のルートへのナビゲーションを仲介するようにルーターに指示します。
{ path: '/your-path', component: YourComponent, canActivate: [YourGuard], }
実用的な例の詳細については、以下を参照してください。 ルートガードに関するルーティングチュートリアルセクション 。
リンクパラメータ配列
リンクパラメータ配列は、ルーターナビゲーションの次の要素を保持します。
- 宛先コンポーネントへのルートのパス。
- ルートURLに入る必須およびオプションのルートパラメータ。
あなたはバインドすることができますこのような配列へのRouterLinkディレクティブ:
<a [routerLink]='['/heroes']'>Heroes</a>
以下は、ルートパラメータを指定する場合の2要素配列です。
<a [routerLink]='['/hero', hero.id]'> <span class='badge'>{{ hero.id }}span>{{ hero.name }} a>
次のように、オブジェクトにオプションのルートパラメータを指定できます。{foo: 'foo'}:
<a [routerLink]='['/crisis-center', { foo: 'foo' }]'>Crisis Center</a>
これらの3つの例は、1レベルのルーティングを備えたアプリのニーズをカバーしています。ただし、危機管理センターなどの子ルーターを使用すると、新しいリンク配列の可能性が生まれます。
次の最小限RouterLinkの例は、指定されたものに基づいています デフォルトの子ルート 危機センターのために。
<a [routerLink]='['/crisis-center']'>Crisis Center</a>
次の点に注意してください。
- 配列の最初の項目は親ルートを識別します(
/危機センター)。
- この親ルートのパラメーターはありません。
- 子ルートにはデフォルトがないため、1つ選択する必要があります。
- あなたはにナビゲートしています
CrisisListComponent、そのルートパスは
/ですが、スラッシュを明示的に追加する必要はありません。
アプリケーションのルートからドラゴンクライシスまでナビゲートする次のルーターリンクについて考えてみます。
Dragon Crisis
- 配列の最初の項目は親ルートを識別します(
/危機センター)。
- この親ルートのパラメーターはありません。
- 2番目の項目は、特定の危機に関する子ルートの詳細を識別します(
/:id)。
- 子ルートの詳細には、
idルートパラメータ。
- 追加しました
配列の2番目の項目としてのドラゴンクライシスのID(
1)。
- 結果のパスは
/危機センター/ 1。
また、を再定義することもできますCrisis Centerルートのみを含むAppComponentテンプレート:
template: ` Crisis Center Heroes
NSアンカータグのRouterLinkディレクティブは、ルーターがこれらの要素を制御できるようにします。ナビゲーションパスは固定されているため、文字列をに割り当てることができます
routerLink(「ワンタイム」バインディング)。
ナビゲーションパスがより動的である場合は、ルートリンクパラメーターの配列を返すテンプレート式にバインドできたはずです。つまり、 リンクパラメータ配列 。ルーターはその配列を完全なURLに解決します。
アクティブルーターリンク
NSRouterLinkActiveディレクティブは、アクティブなCSSクラスを切り替えます
現在のRouterLinkバインディングに基づく
RouterState。
各アンカータグには、 プロパティバインディング に次のようなRouterLinkActiveディレクティブ
routerLinkActive = '...'。
等号の右側のテンプレート式、=、このリンクがアクティブなときにルーターが追加する(リンクが非アクティブなときに削除する)CSSクラスのスペース区切りの文字列が含まれます。あなたは設定します
次のようなクラスの文字列へのRouterLinkActiveディレクティブ
[routerLinkActive] = '' active fluffy ''または、そのような文字列を返すコンポーネントプロパティにバインドします。
アクティブなルートリンクは、ルートツリーの各レベルを介してカスケードされるため、親ルーターリンクと子ルーターリンクを同時にアクティブにすることができます。この動作をオーバーライドするには、にバインドできます[routerLinkActiveOptions]入力バインディング
{正確:真}式。を使用して
{正確:真}、与えられた
RouterLinkは、そのURLが現在のURLと完全に一致する場合にのみアクティブになります。
ルーターの状態
ナビゲーションライフサイクルが成功するたびに、ルーターは次のツリーを構築します。ルータの現在の状態を構成するActivatedRouteオブジェクト。あなたは現在にアクセスすることができます
アプリケーションのどこからでもRouterStateを使用して
ルーターサービスと
routerStateプロパティ。
各のActivatedRoute
RouterStateは、ルートツリーを上下にトラバースして、親、子、および兄弟のルートから情報を取得するメソッドを提供します。
有効化されたルート
ルートパスとパラメータは、ActivatedRouteと呼ばれる挿入されたルーターサービスを介して利用できます。それは以下を含む多くの有用な情報を持っています:
財産 | 説明 |
---|---|
URL | NS |
データ | NS |
paramMap | NS |
queryParamMap | NS |
断片 | NS |
出口 | の名前 |
routeConfig | 起点パスを含むルートに使用されるルート構成。 |
親 | ルートの親 |
第一子 | 最初のものが含まれています |
子供達 | すべてが含まれています 子ルート 現在のルートでアクティブ化されます。 |
2つの古いプロパティは引き続き使用できますが、将来のAngularバージョンで非推奨になる可能性があるため、それらを置き換えることをお勧めします。
params:
必要なとを含むObservable オプションのパラメータ ルートに固有です。使用する
代わりにparamMap。
queryParams:
を含むObservable クエリパラメータ すべてのルートで利用できます。使用する
代わりにqueryParamMap。
ルーターイベント
各ナビゲーション中に、ルーターは、
Router.eventsプロパティ。これらのイベントは、ナビゲーションの開始時と終了時から、その間の多くのポイントにまで及びます。ナビゲーションイベントの完全なリストは、次の表に表示されています。
ルーターイベント | 説明 |
---|---|
NavigationStart | ナビゲーションの開始時にトリガーされるイベント。 |
RouteConfigLoadStart | の前にトリガーされたイベント |
RouteConfigLoadEnd | ルートが遅延ロードされた後にトリガーされるイベント。 |
認識されたルート | ルーターがURLを解析し、ルートが認識されたときにトリガーされるイベント。 |
GuardsCheckStart | ルータがルーティングのGuardsフェーズを開始したときにトリガーされるイベント。 |
ChildActivationStart | ルーターがルートの子のアクティブ化を開始したときにトリガーされるイベント。 |
ActivationStart | ルータがルートのアクティブ化を開始したときにトリガーされるイベント。 |
GuardsCheckEnd | ルーターがルーティングのGuardsフェーズを正常に終了したときにトリガーされるイベント。 |
ResolveStart | ルータがルーティングの解決フェーズを開始したときにトリガーされるイベント。 |
ResolveEnd | ルーターがルーティングの解決フェーズを正常に終了したときにトリガーされるイベント。 |
ChildActivationEnd | ルーターがルートの子のアクティブ化を終了したときにトリガーされるイベント。 |
ActivationEnd | ルーターがルートのアクティブ化を終了したときにトリガーされるイベント。 |
NavigationEnd | ナビゲーションが正常に終了したときにトリガーされるイベント。 |
NavigationCancel | ナビゲーションがキャンセルされたときにトリガーされるイベント。これは、 ルートガード ナビゲーション中にfalseを返すか、 |
NavigationError | 予期しないエラーが原因でナビゲーションが失敗したときにトリガーされるイベント。 |
スクロール | スクロールイベントを表すイベント。 |
有効にするとenableTracingオプション、Angularはこれらのイベントをコンソールに記録します。ルーターナビゲーションイベントのフィルタリングの例については、を参照してください。 ルーターセクション の Angularのオブザーバブル ガイド。
ルーターの用語
ここに鍵がありますルーターの用語とその意味:
ルーター部分 | 意味 |
---|---|
ルーター | アクティブなURLのアプリケーションコンポーネントを表示します。あるコンポーネントから次のコンポーネントへのナビゲーションを管理します。 |
RouterModule | アプリケーションビューをナビゲートするために必要なサービスプロバイダーとディレクティブを提供する個別のNgModule。 |
ルート | ルートの配列を定義し、それぞれがURLパスをコンポーネントにマッピングします。 |
ルート | URLパターンに基づいてルーターがコンポーネントに移動する方法を定義します。ほとんどのルートは、パスとコンポーネントタイプで構成されています。 |
RouterOutlet | ディレクティブ(< router-outlet >)ルーターがビューを表示する場所をマークします。 |
RouterLink | クリック可能なHTML要素をルートにバインドするためのディレクティブ。要素をクリックすると、にバインドされているrouterLinkディレクティブ ストリング または リンクパラメータ配列 ナビゲーションをトリガーします。 |
RouterLinkActive | 関連付けられたときにHTML要素からクラスを追加/削除するためのディレクティブ要素上または要素内に含まれるrouterLinkがアクティブ/非アクティブになります。 |
ActivatedRoute | ルートパラメータ、静的データ、解決データ、グローバルクエリパラメータ、グローバルフラグメントなどのルート固有の情報を含む各ルートコンポーネントに提供されるサービス。 |
RouterState | 現在アクティブ化されているルートのツリーと、ルートツリーをトラバースするための便利なメソッドを含むルーターの現在の状態。 |
リンクパラメータ配列 | ルーターがルーティング命令として解釈する配列。その配列をにバインドできますRouterLinkまたは配列を引数として |
ルーティングコンポーネント | を備えたAngularコンポーネントルーターのナビゲーションに基づいてビューを表示するRouterOutlet。 |