概要

ルーティングが解決すべき核心的な問題は,URLとページの対応関係を確立することによって,異なるページが異なるURLで表すことができるようにすることである.
Angularルーティングのコアワークフローチャート

まず、ユーザがブラウザにURLを入力と、AngularはそのURLを取得し、その解析をUrlTreeインスタンス

を生成する.

次に、UrlTreeインスタンスに一致する構成アイテム

をルーティング構成で探してアクティブ化する.

再び、構成項目に指定されたコンポーネントのインスタンス

を作成する.

最後に、コンポーネントは、ルーティングコンポーネントのテンプレート内の命令が存在する位置

にレンダリングされる.

基本的な使い方

Angularルーティングの最も基本的な使い方は、1つのURLに対応するコンポーネントをページに表示することです.これを行うには、 、 、 の3つの必須のステップがあります.

ルートルーティングモジュールの作成

ルートルーティングモジュールは、ルーティングに必要な各サービスを含み、ルーティングワークフローが正常に実行される基礎である.
次のコードはルート構成rootRouterConfigをパラメータとしてRouterModuleを呼び出す.forRoot()メソッドは、ルートルーティングモジュールを作成し、アプリケーションのルートモジュールAppModuleにインポートします.
app-routing.module.ts

const rootRouterConfig: Routes = [
  {
    path: 'add',
    component: AddComponent,
  },
  {
    path: 'list',
    component: ListComponent,
  },
  {
    path: '',
    redirectTo: 'add',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: 'add',
    pathMatch: 'full',
  }
];

@NgModule({
  imports: [RouterModule.forRoot(rootRouterConfig)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

pathはスラッシュ/先頭

では使用できません.

**ワイルドカードルーティング、以上のパスを満たさない場合、このルーティング

を選択する.

ルーティングポリシー

HashLocationStrategy

http://localhost:4200/#/add

HashLocationStrategyはAngularルーティングで最も一般的なポリシーであり、hash部分を処理するブラウザの特性を利用することを原理としています.
ブラウザがサーバに要求を送信する際にhash部分の内容を持ち込まず、URLを変更したhash部分がサーバに要求を再送信しないため、ジャンプを行う際にページのリフレッシュやアプリケーションの再ロードが起こらない
このポリシーは,ルーティングサービスを注入する際にuseHash属性を用いて表示指定するだけでよい.
app-routing.module.ts

@NgModule({
  imports: [RouterModule.forRoot(rootRouterConfig, { useHash: true })],
  exports: [RouterModule]
})

HashLocationStrategy

ルーティングジャンプ

Webアプリケーションにおけるページジャンプとは、あるイベントに応答して、あるページから別のページにジャンプする動作を指す.Angularが構築した単一ページの場合、ページジャンプは実質的に1つの構成項目から別の構成項目にジャンプする動作である.

コマンドジャンプ

命令ホッピングはRouterLink命令を用いて行われ,この命令はリンクパラメータ配列を受信し,Angularはその配列に基づいてUrlTreeインスタンスを生成してホッピングする

add
list

最初のパラメータ名は、/、./を使用できます.または.../接頭辞

最初のセグメントが/先頭の場合、ルータはアプリケーションのルートから

を検索します.

最初のクリップが./先頭またはスラッシュで始まると、ルータは現在アクティブなルーティングから

を検索します.

最初のフラグメントが.../最初は、ルータがレベル

を探します.
RouterLinkコマンドは、ページジャンプがハイパーリンクに依存する必要がないように、任意のHTML要素に適用できます.

コードジャンプ

RouterLink命令は、clickイベントに応答するページジャンプを実現し、他のイベントに応答したり、実行時に応じて動的にジャンプする必要がある場合はRouterを通過することができる.navigateByUrlまたはRouter.navigateで完成します.

add() {
    this.router.navigateByUrl('/add');
}

list() {
    this.router.navigate(['/list']);
}

ルーティングパラメータ

Pathパラメータ

PathパラメータはURLのpath部分を解析することによりパラメータを取得する.
コンフィギュレーション・アイテムのpathプロパティを定義する場合は、/文字を使用してpathプロパティをセグメント化できます.セグメントが文字で始まると、URLのセグメントと一致する部分がパラメータとしてコンポーネントに渡されます.
app-routing.module.ts

const rootRouterConfig: Routes = [
  {
    path: 'add/:id/:name/:age/:sex',
    component: DetailComponent,
  }
];

detail 1 tao1 30 man

コンポーネントでPathパラメータを取得するには、ページ間のジャンプを処理する2つの方法を提供するActivatedRouteサービスをインポートする必要があります.

異なるページ

Angularアプリケーションは、1つのページから別の新しいページにジャンプし、実質的には1つの構成項目から別の構成項目にジャンプします.このプロセスでAngularは、コンフィギュレーション・アイテムに対応するコンポーネントのインスタンスを作成するほか、現在のURLから解析されたすべてのpathパラメータを記録するスナップショット(snapshot)を含むコンフィギュレーション・アイテムがアクティブになっていることを示すActivityインスタンスを作成します.

ngOnInit() {
    console.log(this.activatedRouter.snapshot.params);
  }

{id: "1", name: "tao", age: "30", sex: "man"}

同一ページ

Angularは同じページを処理しても、コンポーネントを作成したインスタンスは再現されないので、コンストラクション関数とngOnInit()メソッドは呼び出されません.Angularはスナップショットのパラメータを更新しますが、コンポーネントに値は更新されません.この問題を解決するために、ActivatedRouteサービスは、パラメータの更新を購読できるObservableオブジェクトを提供します.コンポーネントが破棄されると、購読をキャンセルします.

this.activatedRouter.params.subscribe(value => {
      console.log(value)；
})

ngOnDestroy() {
    this.sub.unsubscribe();
}

Queryパラメータ

URLのqueryセクションはコンフィギュレーション・アイテムと一致しないため、各コンフィギュレーション・アイテムは任意の複数のクエリー・パラメータを持つことができます.

http://localhost:4200/list?limit=10

Queryパラメータは、RouterLink命令またはジャンプメソッドによっても同様に割り当てることができます.

>detail limit 10
>detail limit 30

Queryパラメータの取得は、ActivatedRouteサービスが提供するObservableオブジェクトのqueryParamsによって行う必要があります.

this.sub2 = this.activatedRouter.queryParams.subscribe(value => {
      console.log(value);
    })

// {limit: "10"}

ルーティングブロック