Angularでのルーティングの概要

提供:Dev Guides
移動先:案内検索

Angular 2+のルーターを使用すると、アプリケーションのルートを簡単に定義できます。 アプリで基本的なルーティングを開始する手順は次のとおりです。

1. ベースタグ

Angular CLI を使用してプロジェクトを作成する場合、ベースタグはデフォルトで index.html に追加されますが、Angularを使用していない場合は自分で追加することをお勧めしますCLI。 あなたがしなければならないのは、スタイルやスクリプトの宣言の前に、これをドキュメントの先頭に追加することだけです。

<base href="/">

2. モジュール構成

次に、RouterModuleRoutesappmodule app.module.ts )にインポートし、ルーティングを含む配列を定義します構成。 メインアプリモジュールにインポートされたRouterModuleは、ルーターをアプリ内のどこからでも利用できるようにします。 また、アプリが大きくなったときに、関心の分離を改善するために、別のルーティングモジュールでルーティング構成を定義することをお勧めします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes }   from '@angular/router';

import { AppComponent } from './app.component';
import { ProfileComponent } from './profile/profile.component';
import { SettingsComponent } from './settings/settings.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', component: ProfileComponent },
  { path: 'settings', component: SettingsComponent }
];

3. テンプレート付き &routerLink

アプリコンポーネントはアプリのシェルになり、 ルーティングをレンダリングするタグ。 アンカータグは、href属性の代わりに routerLink バインディングを使用して、特定のルートを指します。 以下は、app.component.tsがどのようになるかを示しています。

routerLinkActive バインディングの使用にも注意してください。これにより、指定されたクラス名が現在アクティブなルートに追加され、CSSを使用してアクティブなリンクのスタイルを簡単に設定できます。

<nav>
  <a routerLink="/"
     routerLinkActive="active">Home</a>
  <a routerLink="/profile"
     routerLinkActive="active">Profile</a>
  <a routerLink="/settings"
     routerLinkActive="active">Settings</a>
</nav>