Angular 13でルーティングを備えたモジュールを作成する方法

新しいモジュールを作成するまず、Angular CLIを使用して新しいモジュールを作成します。ターミナルを開き、以下のコマンドを実行します。

ng generate module routing-module

これにより、"routing-module"という名前の新しいモジュールが生成されます。

ルーティングモジュールを作成する次に、ルーティングモジュールを作成します。以下のコマンドを実行します。

ng generate module routing-module --routing

これにより、"routing-module"という名前の新しいモジュールが生成され、ルーティング機能が有効になります。

ルーティング設定を追加するルーティングモジュール内で、ルーティング設定を行います。以下は、基本的なルーティング設定の例です。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RoutingModule { }

上記の例では、ホームページと「/about」パスに対してそれぞれコンポーネントが関連付けられています。

ルーティングモジュールを他のモジュールに取り込む最後に、ルーティングモジュールを他のモジュールに取り込む必要があります。他のモジュールでルーティング機能を使用したい場合は、importsにRoutingModuleを追加します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RoutingModule } from './routing.module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

これで、ルーティングを備えたモジュールが作成されました。必要に応じて、さらにルートやコンポーネントを追加することもできます。

以上が、Angular 13でルーティングを備えたモジュールを作成する方法です。これにより、アプリケーション内の異なるビューを効果的にナビゲートすることができます。