Angularでのルーティングの概要
Angular 2+のルーターを使用すると、アプリケーションのルートを簡単に定義できます。 アプリで基本的なルーティングを開始する手順は次のとおりです。
1. ベースタグ
Angular CLI を使用してプロジェクトを作成する場合、ベースタグはデフォルトで index.html に追加されますが、Angularを使用していない場合は自分で追加することをお勧めしますCLI。 あなたがしなければならないのは、スタイルやスクリプトの宣言の前に、これをドキュメントの先頭に追加することだけです。
<base href="/">
2. モジュール構成
次に、RouterModuleとRoutesをappmodule ( 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
アプリコンポーネントはアプリのシェルになり、
routerLinkActive バインディングの使用にも注意してください。これにより、指定されたクラス名が現在アクティブなルートに追加され、CSSを使用してアクティブなリンクのスタイルを簡単に設定できます。
<nav>
<a routerLink="/"
routerLinkActive="active">Home</a>
<a routerLink="/profile"
routerLinkActive="active">Profile</a>
<a routerLink="/settings"
routerLinkActive="active">Settings</a>
</nav>