Angularでのルーティングの概要
提供:Dev Guides
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
アプリコンポーネントはアプリのシェルになり、 ルーティングをレンダリングするタグ。 アンカータグは、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>