渚  直樹

渚 直樹

1656685502

Angularルートパラメータの概要

ルーティングはAngularの基本的なメカニズムの1つです。その主な用途は、アプリケーション内を移動する方法を提供することです。それがなければ、私たちは永遠に同じページにとどまるでしょう!

ナビゲートとは別に、ルーティングを使用して、ルーティングされたコンポーネント間で小さな情報を渡すこともできます。これは、Angularルートパラメータを使用して実現できます。

ルートパラメータには次の3つのタイプがあります。

  • 必要なパラメータ、
  • オプションのパラメータ、および
  • クエリパラメータ。

この記事では、基本的なルーティングがどのように機能するかを示します。次に、Angularが提供する3種類のルートパラメーターすべてを調査します。

それでは、始めましょう!

 

ルーティングの基本

ルーティングは、主にアプリケーション内を移動する方法を提供するために使用されます。ほとんどの単一ページのアプリケーションには、ある種のメニュー(またはツールバー)があるため、ユーザーはメニューオプションをクリックして機能に移動できます。

ナビゲーションを実現するにRouterLinkは、メニューのHTMLでディレクティブを使用します。はrouterLink、ユーザーがその特定のオプションをクリックしたときにアクティブになるルートを定義します。


<div>
   <ul>
      <li><a [routerLink]="['/home']">Home</a></li>
      <li><a [routerLink]="['/pandas']">Pandas</a></li>
   </ul>
   <router-outlet></router-outlet>
</div>

「パンダ」リンクをクリックするとします。次に、URLアドレスバーが更新され、アクティブ化されたルートが含まれますhtttp://localhost:4200/pandas

はアドレスバーへのRouter変更を検出し、ルート構成パスのリストに一致するものがないか順番にチェックします。

RouterModule.forRoot([
   {
      path: '', redirectTo: 'home', pathMatch: 'full'
   },
   {
      path: 'home',  component: HomeComponent
   },
   {
      path: 'pandas', component: PandaListComponent
   },
   {
      path: 'pandas/:id', component: PandaDisplayComponent
   }
]);

見つかった最初の一致を選択してから、指定されたコンポーネントをロードします。識別されたコンポーネントを配置する場所を指定するディレクティブをRouter探します。RouterOutlet最後に、で定義された場所にそのビューを表示しますRouterOutlet

 

ルートパラメータ

Angularは、必須、オプション、クエリパラメーターの3種類のルートパラメーターを提供します。

必要なパラメータ

それらの名前が示すように、これらのパラメーターは、次にルーティングされるコンポーネントが正しく機能するために必要です。必須パラメータは、ルート構成の一部として定義する必要があります。


 {
    path: 'pandas/:id', component: PandaDisplayComponent
 }

id前のスニペットでは、パンダの必須パラメーターを定義しました。このルートに移動するにはid、ルーティングされたコンポーネントPandaDisplayComponentが選択したパンダを読み込んで表示できるようにする必要があります。

必要なパラメーターを使用してパスをアクティブ化するには、を使用してrouterLink、指定されたパラメーターを追加の要素として関連する配列に渡します。


<div *ngFor="let panda of pandas">
   <a [routerLink]="['/pandas', panda.id]">
      {{ panda.name }}
   </a>
</div>

プログラムでナビゲートするには、同様の方法でパラメーターを渡します。


this.router.navigate(
   ['/pandas', this.panda.id]
);

結果のURLは次のようになりますhttp://localhost/pandas/1。ルーティングされたコンポーネントは、そのパラメーターを読み取り、それを使用して正しいパンダを表示できます。


const param = this.route.snapshot.paramMap.get('id');
if (param) {
   const id = +param;
   this.panda = this.pandaService.getPandaById(id);
}

ゲッターで渡されるパラメーター名は、パスで定義されている名前と正確に一致する必要があることに注意してください。

 

オプションのパラメータ

必須パラメーターとは異なり、オプションのパラメーターは必須ではありません。したがって、これらはルート構成の一部ではありません。代わりに、ルートをアクティブ化するときにオプションのパラメータを指定します。


<a  [routerLink]="['/pandas', { filterTerm, sortBy }]">
   Pandas
</a>

前のスニペットは、という名前のオプションのパラメーターを渡しますfilterTerm

ヒント:これをと書くこともできます{ filterTerm: filterTerm }が、少し冗長に見えます。しかし、私たちはあなたがすでにこれを知っていると推測しています。

それぞれ、プログラムでナビゲートするには、同様にパラメーターを渡します。

this.router.navigate(
   ['/pandas', { filterTerm, sortBy }]
);

オプションのパラメーターは、関連付けられた配列の単一要素内のキーと値のペアのセットとして指定されます。結果のURLは次のようになりますhttp://localhost:4200/pandas;filterTerm=Bobo;sortBy=name。少し奇妙に思えるかもしれませんが、基本的にはセミコロンで区切られたキーと値のペアです。

このURLはブックマーク可能です。つまり、このURLをコピーしてアドレスバーに貼り付けると、コンポーネントはその特定のフィルタリングと並べ替えを使用して読み込まれます。

ルーティングされたコンポーネントは、パラメータを読み取って使用できます。


const filterTemr = this.route.snapshot.paramMap.get('filterTerm');
const sortBy = this.route.snapshot.paramMap.get('sortBy');

 

クエリパラメータ

オプションパラメータのようなクエリパラメータは、ルート設定の一部として指定されていません。代わりに、追加のディレクティブでルートをアクティブ化するときにそれらを指定しますqueryParams


<a [routerLink]="['/pandas']"
   [queryParams]="{ filterTerm, sortBy }"
>
   Pandas
</a>

プログラムでナビゲートするには、プロパティを持つ追加のナビゲーションオブジェクトとしてパラメータを渡しqueryParamsます。オブジェクトが関連付けられた配列にないことに注意してください!

this.router.navigate(
   ['/pandas'],
   { queryParams: { filterTerm, sortBy } }
);

結果のURLはhttp://localhost:4200?filterTerm=Bobo&sortBy=name、クエリパラメータの標準URL形式に準拠しています。この場合も、このURLは、オプションのパラメーターと同様にブックマーク可能です。

ルーティングされたコンポーネントは、パラメータを読み取って使用できます。


const filterTerm = this.route.snapshot.queryParamMap.get('filterTerm');
const sortBy = this.route.snapshot.queryParamMap.get('sortBy');

queryParamMapの代わりにを使用していることに注意してくださいparamMap

このStackBlitzリンクで実用的なデモを見つけることができます。

オプションとクエリ

この時点で、オプションパラメータとクエリパラメータの違いは何でしょうか。構文と結果のURL?確かに、クエリパラメータにはより馴染みのあるURLがありますが、それ以外に何か特別なものがありますか?

もちろんです!オプションのパラメーターを使用して、パスを戻さずに前のルートに戻ると、パラメーターは失われます。一方、クエリパラメータを使用すると、設定でき、queryParamsHandling自動的に含まれます。


<button 
  [routerLink]="['/pandas']"
   queryParamsHandling="preserve"
>
   Back
</button>

 

結論

この記事では、基本的なルーティングがどのように機能するかについて簡単に説明しました。次に、3種類の角度ルートパラメーター(必須、オプション、クエリ)を調べました。最後に、オプションパラメータとクエリパラメータの主な違いを示しました。

あなたが何か新しいことを学んだことを願っています。ハッピーコーディング!

ソース:https ://javascript.plainenglish.io/angular-route-parameters-a-simple-guide-88c69d54102c

#angular #route 

What is GEEK

Buddha Community

Angularルートパラメータの概要
渚  直樹

渚 直樹

1656685502

Angularルートパラメータの概要

ルーティングはAngularの基本的なメカニズムの1つです。その主な用途は、アプリケーション内を移動する方法を提供することです。それがなければ、私たちは永遠に同じページにとどまるでしょう!

ナビゲートとは別に、ルーティングを使用して、ルーティングされたコンポーネント間で小さな情報を渡すこともできます。これは、Angularルートパラメータを使用して実現できます。

ルートパラメータには次の3つのタイプがあります。

  • 必要なパラメータ、
  • オプションのパラメータ、および
  • クエリパラメータ。

この記事では、基本的なルーティングがどのように機能するかを示します。次に、Angularが提供する3種類のルートパラメーターすべてを調査します。

それでは、始めましょう!

 

ルーティングの基本

ルーティングは、主にアプリケーション内を移動する方法を提供するために使用されます。ほとんどの単一ページのアプリケーションには、ある種のメニュー(またはツールバー)があるため、ユーザーはメニューオプションをクリックして機能に移動できます。

ナビゲーションを実現するにRouterLinkは、メニューのHTMLでディレクティブを使用します。はrouterLink、ユーザーがその特定のオプションをクリックしたときにアクティブになるルートを定義します。


<div>
   <ul>
      <li><a [routerLink]="['/home']">Home</a></li>
      <li><a [routerLink]="['/pandas']">Pandas</a></li>
   </ul>
   <router-outlet></router-outlet>
</div>

「パンダ」リンクをクリックするとします。次に、URLアドレスバーが更新され、アクティブ化されたルートが含まれますhtttp://localhost:4200/pandas

はアドレスバーへのRouter変更を検出し、ルート構成パスのリストに一致するものがないか順番にチェックします。

RouterModule.forRoot([
   {
      path: '', redirectTo: 'home', pathMatch: 'full'
   },
   {
      path: 'home',  component: HomeComponent
   },
   {
      path: 'pandas', component: PandaListComponent
   },
   {
      path: 'pandas/:id', component: PandaDisplayComponent
   }
]);

見つかった最初の一致を選択してから、指定されたコンポーネントをロードします。識別されたコンポーネントを配置する場所を指定するディレクティブをRouter探します。RouterOutlet最後に、で定義された場所にそのビューを表示しますRouterOutlet

 

ルートパラメータ

Angularは、必須、オプション、クエリパラメーターの3種類のルートパラメーターを提供します。

必要なパラメータ

それらの名前が示すように、これらのパラメーターは、次にルーティングされるコンポーネントが正しく機能するために必要です。必須パラメータは、ルート構成の一部として定義する必要があります。


 {
    path: 'pandas/:id', component: PandaDisplayComponent
 }

id前のスニペットでは、パンダの必須パラメーターを定義しました。このルートに移動するにはid、ルーティングされたコンポーネントPandaDisplayComponentが選択したパンダを読み込んで表示できるようにする必要があります。

必要なパラメーターを使用してパスをアクティブ化するには、を使用してrouterLink、指定されたパラメーターを追加の要素として関連する配列に渡します。


<div *ngFor="let panda of pandas">
   <a [routerLink]="['/pandas', panda.id]">
      {{ panda.name }}
   </a>
</div>

プログラムでナビゲートするには、同様の方法でパラメーターを渡します。


this.router.navigate(
   ['/pandas', this.panda.id]
);

結果のURLは次のようになりますhttp://localhost/pandas/1。ルーティングされたコンポーネントは、そのパラメーターを読み取り、それを使用して正しいパンダを表示できます。


const param = this.route.snapshot.paramMap.get('id');
if (param) {
   const id = +param;
   this.panda = this.pandaService.getPandaById(id);
}

ゲッターで渡されるパラメーター名は、パスで定義されている名前と正確に一致する必要があることに注意してください。

 

オプションのパラメータ

必須パラメーターとは異なり、オプションのパラメーターは必須ではありません。したがって、これらはルート構成の一部ではありません。代わりに、ルートをアクティブ化するときにオプションのパラメータを指定します。


<a  [routerLink]="['/pandas', { filterTerm, sortBy }]">
   Pandas
</a>

前のスニペットは、という名前のオプションのパラメーターを渡しますfilterTerm

ヒント:これをと書くこともできます{ filterTerm: filterTerm }が、少し冗長に見えます。しかし、私たちはあなたがすでにこれを知っていると推測しています。

それぞれ、プログラムでナビゲートするには、同様にパラメーターを渡します。

this.router.navigate(
   ['/pandas', { filterTerm, sortBy }]
);

オプションのパラメーターは、関連付けられた配列の単一要素内のキーと値のペアのセットとして指定されます。結果のURLは次のようになりますhttp://localhost:4200/pandas;filterTerm=Bobo;sortBy=name。少し奇妙に思えるかもしれませんが、基本的にはセミコロンで区切られたキーと値のペアです。

このURLはブックマーク可能です。つまり、このURLをコピーしてアドレスバーに貼り付けると、コンポーネントはその特定のフィルタリングと並べ替えを使用して読み込まれます。

ルーティングされたコンポーネントは、パラメータを読み取って使用できます。


const filterTemr = this.route.snapshot.paramMap.get('filterTerm');
const sortBy = this.route.snapshot.paramMap.get('sortBy');

 

クエリパラメータ

オプションパラメータのようなクエリパラメータは、ルート設定の一部として指定されていません。代わりに、追加のディレクティブでルートをアクティブ化するときにそれらを指定しますqueryParams


<a [routerLink]="['/pandas']"
   [queryParams]="{ filterTerm, sortBy }"
>
   Pandas
</a>

プログラムでナビゲートするには、プロパティを持つ追加のナビゲーションオブジェクトとしてパラメータを渡しqueryParamsます。オブジェクトが関連付けられた配列にないことに注意してください!

this.router.navigate(
   ['/pandas'],
   { queryParams: { filterTerm, sortBy } }
);

結果のURLはhttp://localhost:4200?filterTerm=Bobo&sortBy=name、クエリパラメータの標準URL形式に準拠しています。この場合も、このURLは、オプションのパラメーターと同様にブックマーク可能です。

ルーティングされたコンポーネントは、パラメータを読み取って使用できます。


const filterTerm = this.route.snapshot.queryParamMap.get('filterTerm');
const sortBy = this.route.snapshot.queryParamMap.get('sortBy');

queryParamMapの代わりにを使用していることに注意してくださいparamMap

このStackBlitzリンクで実用的なデモを見つけることができます。

オプションとクエリ

この時点で、オプションパラメータとクエリパラメータの違いは何でしょうか。構文と結果のURL?確かに、クエリパラメータにはより馴染みのあるURLがありますが、それ以外に何か特別なものがありますか?

もちろんです!オプションのパラメーターを使用して、パスを戻さずに前のルートに戻ると、パラメーターは失われます。一方、クエリパラメータを使用すると、設定でき、queryParamsHandling自動的に含まれます。


<button 
  [routerLink]="['/pandas']"
   queryParamsHandling="preserve"
>
   Back
</button>

 

結論

この記事では、基本的なルーティングがどのように機能するかについて簡単に説明しました。次に、3種類の角度ルートパラメーター(必須、オプション、クエリ)を調べました。最後に、オプションパラメータとクエリパラメータの主な違いを示しました。

あなたが何か新しいことを学んだことを願っています。ハッピーコーディング!

ソース:https ://javascript.plainenglish.io/angular-route-parameters-a-simple-guide-88c69d54102c

#angular #route