Angular4入門_Vol.3
参考サイト
https://www.codingforentrepreneurs.com/projects/try-angular-v4/
Mapping Urls with Router Moudle
routermoduleを使って、urls のmappingをする。
まず、src/app/app.routing.tsファイルを作成する。
import { NgModule } from '@angular/core'; import { RouterModule, Routes} from '@angular/router'; import { VideoListComponent } from './video-list/video-list.component'; import { VideoDetailComponent } from './video-detail/video-detail.component'; const appRoutes: Routes = [ //appRoutes は、Routesでアノテーションする。Routesは、すでにimportしたclass { path:"videos", // pathは、url component: VideoListComponent, // pathにアクセスしたときに実行されるcomponentのことかな。outlet-routerの対象になるselectorってことなのかな。 }, { path:"videos/:slug", //:slugの部分は、djangoでいうと{pk:pk}とかに当たる部分かな。 component: VideoDetailComponent, }, ] // 以下はいまのところさっぱりわからんから、公文としておぼえておこう。 @NgModule({ imports: [ RouterModule.forRoot( appRoutes ) ], exports:[ RouterModule ] }) export class AppRoutingModule{ }
- 次に作成した、AppRoutingModuleをapp.module.tsにimportする。
... import { AppRoutingModule } from './app.routing'; ... @NgModule({ declarations: [ AppComponent, VideoListComponent, VideoDetailComponent ], imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- app.component.htmlに
router-outlet
selectorを入れる。
<h1>{{ title }} is cool!</h1> <p>{{ description }}</p> <hr> <video-list></video-list> <router-outlet></router-outlet>
- localhost:4200にアクセスしてみる。。。error発生!
Error: Cannot match any routes. URL Segment: 'item-3' Error: Cannot match any routes. URL Segment: 'item-3'
app.routing.tsに設定した通り、
http://127.0.0.1:4200/videos
にアクセスしてみる。videos-listはうまく表示された!http://127.0.0.1:4200/videos/item-1
にアクセスしてみる。こちらも、video-detail works!が表示された!app.routing.ts を少し修正する。pathが無いときのcomponentも指定しておく。これで、
http://127.0.0.1:4200
のときに、VideoListComponentが実行されるようになる。
... const appRoutes: Routes = [ { path:"", component: VideoListComponent, }, { path:"videos", component: VideoListComponent, }, { path:"videos/:slug", component: VideoDetailComponent, }, ] ...