Ionic4でのAngularRoutingの使用

投稿日: 2022-04-20 2022-04-20

ルーターモジュールは、Angularライブラリで最も重要なものの1つです。 Ionic 4 と組み合わせると、止められなくなります。要約は次のとおりです。

バックグラウンド

Ionic 4の重要な機能の1つは、Angularルーティングを使用する機能です。 Angularルーターはパス/コンポーネントルックアップを実装します。つまり、AngularルーティングはWebブラウザのURLのように機能します。 /your-page-nameを呼び出すと、Ionicページを参照できます。

シンプルなルーティング

アプリが読み込まれると、Angularルーターは読み込まれているURLを読み取ることから始めます。次のスニペットでは、ルーターがインデックスルートである” を検索していることがわかります（alligator.io/ionicではなくalligator.ioと考えてください）。このルート”の場合、HomeComponentをロードします。

続けて‘alligator’を呼び出すと、AlligatorComponentが読み込まれます。

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
  ...
  RouterModule.forRoot([
    { path: '', component: HomeComponent },
    { path: 'alligator', component: AlligatorComponent },
  ])
  ],
})

ルートのリダイレクト

ルーターリダイレクトを使用して、初期ロード時にさまざまなパスをロードできます。

[
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'chomp', component: ChompComponent }
];

最初のロード時に、インデックスルートを探します。これをロードすると、‘login’ルートにリダイレクトされます。

pathMatch に続くキーは、ルーターに新しいパスを検索する方法を指示します。この場合、キー full は、フルパスを比較するようにルーターに指示します。

これは、次のようなものがある場合を意味します。

{ path: '/route1/route2', redirectTo: 'alligator', pathMatch: 'full' },
{ path: 'alligator', component: AlligatorComponent },

/ route1 / route2 をロードすると、‘alligator’にリダイレクトされます。ただし、 / route1 / route2 / Grip を読み込もうとすると、パスが完全に一致しないため、ルーターは‘alligator’にリダイレクトしません。

キープレフィックスを使用することもできます。

{ path: '/route1/route2', redirectTo: 'nest', pathMatch: 'prefix' },
{ path: 'nest', component: NestComponent },

ここで、 / route1 /route2または/route1 / route2 / bayou のいずれかをロードすると、‘nest’にリダイレクトされます。これは、パスのプレフィックスが一致するためです。

遅延読み込み

現在、Ionicアプリを生成すると、フレームワークは遅延読み込みを使用するルーターモジュールを提供します。以下は、生成されるapp-routing.module.tsファイルの例です。

app-routing.module.ts

...
const routes: Routes = [
  { path: '', loadChildren: './alligator/alligator.module#AlligatorPageModule' },
  { path: 'eggs', loadChildren: './eggs/eggs.module#EggsPageModule' },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
...

ここで、すべてのルートが定数 routers に格納されていることに注意してください。この定数は、使い慣れた Router.Module.forRoot（）内で呼び出されます。

loadChildren プロパティを使用すると、コンポーネントではなく文字列でモジュールを参照できます。したがって、Ionicアプリに追加するコンポーネントごとにモジュールが必要です。ありがたいことに、Ionicは、一致するモジュールを使用してすべてのコンポーネントを自動的に生成します。ただし、デモンストレーションのために、コンポーネントモジュールの例を次に示します。

卵.module.ts

import { RouterModule } from '@angular/router';
import { EggsComponent } from './eggs.component';

Ionicで新しいページを生成するたびに、フレームワークはルーターモジュール内に新しいルーターエントリを自動的に追加します。「ありがとう、イオン！」と言います。 🙏🙏

この設定では、アプリコンポーネント、卵コンポーネント、ワニコンポーネントに別々のチャンクを作成できます。

ルートへのナビゲート

次のようにルートを設定したとしましょう。

app-routing.module.ts

...
const routes: Routes = [
  { path: '', loadChildren: './gator/gator.module#GatorPageModule' },
  { path: 'tail', loadChildren: './tail/tail.module#TailPageModule' },
];

GatorページからTailページに移動するには、次のようにHTMLテンプレートを設定します。

gator.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Gator</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button [routerLink]="['/tail']">Go to Tail</ion-button>
</ion-content>

routerLink ディレクティブは、通常のhrefと同様に機能しますが、URLを文字列として作成するのではなく、配列として作成することができ、より複雑なパスを提供できます。

🐊🔀ルーティングを取得しましょう！

getdocs

13036