honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(router): Updated usage of observables in router tutorial and developer guide (#2696) 

Moved route configuration into separate variable for consistency
Added async pipe to handle subscriptions for list items
This commit is contained in:
Ward Bell 2016-11-14 12:43:09 -08:00 committed by GitHub
parent 43457e9765 1afe5dc97d
commit 5c4cc9a3c8
42 changed files with 540 additions and 571 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts
View File

@ -1,7 +1,7 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
@ -9,24 +9,26 @@ import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-routes
@NgModule({
imports: [
RouterModule.forChild([
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
children: [
{
path: 'admin',
component: AdminComponent,
path: '',
children: [
{
path: '',
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
])
]
}
];
@NgModule({
imports: [
RouterModule.forChild(adminRoutes)
],
exports: [
RouterModule

46
public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts
View File

@ -1,7 +1,7 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
@ -11,29 +11,31 @@ import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-route, can-activate-child
import { AuthGuard } from '../auth-guard.service';
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
],
// #enddocregion admin-route
// #docregion can-activate-child
canActivateChild: [AuthGuard]
// #docregion admin-route
}
]
}
];
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
],
// #enddocregion admin-route
// #docregion can-activate-child
canActivateChild: [AuthGuard]
// #docregion admin-route
}
]
}
])
RouterModule.forChild(adminRoutes)
],
exports: [
RouterModule

38
public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts
View File

@ -1,7 +1,7 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
@ -12,26 +12,28 @@ import { ManageHeroesComponent } from './manage-heroes.component';
import { AuthGuard } from '../auth-guard.service';
// #docregion can-activate-child
@NgModule({
imports: [
RouterModule.forChild([
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
path: '',
canActivateChild: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
])
]
}
];
@NgModule({
imports: [
RouterModule.forChild(adminRoutes)
],
exports: [
RouterModule

36
public/docs/_examples/router/ts/app/admin/admin-routing.module.ts
View File

@ -1,7 +1,7 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
@ -11,26 +11,28 @@ import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-route
import { AuthGuard } from '../auth-guard.service';
@NgModule({
imports: [
RouterModule.forChild([
const adminRoutes: Routes = [
{
path: '',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
component: AdminComponent,
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
])
]
}
];
@NgModule({
imports: [
RouterModule.forChild(adminRoutes)
],
exports: [
RouterModule

14
public/docs/_examples/router/ts/app/app-routing.module.1.ts
View File

@ -1,17 +1,19 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent }
];
@NgModule({
imports: [
RouterModule.forRoot([
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent }
])
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule

12
public/docs/_examples/router/ts/app/app-routing.module.2.ts
View File

@ -1,15 +1,17 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent }
];
@NgModule({
imports: [
RouterModule.forRoot([
{ path: 'crisis-center', component: CrisisListComponent },
])
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule

10
public/docs/_examples/router/ts/app/app-routing.module.3.ts
View File

@ -1,13 +1,15 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';
const appRoutes: Routes = [
];
@NgModule({
imports: [
RouterModule.forRoot([
])
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule

12
public/docs/_examples/router/ts/app/app-routing.module.4.ts
View File

@ -1,15 +1,17 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
const appRoutes: Routes = [
];
@NgModule({
imports: [
RouterModule.forRoot([
])
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule

23
public/docs/_examples/router/ts/app/app-routing.module.5.ts
View File

@ -2,7 +2,7 @@
// #docregion
import { NgModule } from '@angular/core';
// #docregion import-router
import { RouterModule } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';
// #enddocregion import-router
import { CanDeactivateGuard } from './can-deactivate-guard.service';
@ -11,17 +11,20 @@ import { AuthGuard } from './auth-guard.service';
// #enddocregion can-load-guard
// #docregion lazy-load-admin, can-load-guard
const appRoutes: Routes = [
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
// #enddocregion lazy-load-admin
canLoad: [AuthGuard]
// #docregion lazy-load-admin
}
];
@NgModule({
imports: [
RouterModule.forRoot([
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
// #enddocregion lazy-load-admin
canLoad: [AuthGuard]
// #docregion lazy-load-admin
}
])
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule

43
public/docs/_examples/router/ts/app/app-routing.module.6.ts
View File

@ -2,7 +2,7 @@
// #docregion, preload-v1
import { NgModule } from '@angular/core';
import {
RouterModule,
RouterModule, Routes,
// #enddocregion preload-v1
PreloadAllModules
// #docregion preload-v1
@ -11,27 +11,30 @@ import {
import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { AuthGuard } from './auth-guard.service';
const appRoutes: Routes = [
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [AuthGuard]
},
{
path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{
path: 'crisis-center',
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
}
];
@NgModule({
imports: [
RouterModule.forRoot([
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [AuthGuard]
},
{
path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{
path: 'crisis-center',
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
},
],
// #enddocregion preload-v1
{ preloadingStrategy: PreloadAllModules }
// #docregion preload-v1
RouterModule.forRoot(
appRoutes
// #enddocregion preload-v1
, { preloadingStrategy: PreloadAllModules }
// #docregion preload-v1
)
],
exports: [

52
public/docs/_examples/router/ts/app/app-routing.module.ts
View File

@ -1,36 +1,40 @@
// #docplaster
// #docregion, preload-v1
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { AuthGuard } from './auth-guard.service';
import { PreloadSelectedModules } from './selective-preload-strategy';
const appRoutes: Routes = [
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [AuthGuard]
},
{
path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
// #docregion preload-v2
{
path: 'crisis-center',
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
data: {
preload: true
}
}
// #enddocregion preload-v2
];
@NgModule({
imports: [
RouterModule.forRoot([
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [AuthGuard]
},
{
path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
// #docregion preload-v2
{
path: 'crisis-center',
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
data: {
preload: true
}
}
// #enddocregion preload-v2
],
{ preloadingStrategy: PreloadSelectedModules })
RouterModule.forRoot(
appRoutes,
{ preloadingStrategy: PreloadSelectedModules }
)
],
exports: [
RouterModule

44
public/docs/_examples/router/ts/app/app.module.0.ts
View File

@ -1,10 +1,10 @@
// #docplaster
// #docregion
// #docregion router-basics
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroListComponent } from './hero-list.component';
@ -14,27 +14,29 @@ import { PageNotFoundComponent as HeroDetailComponent } from './not-found.compon
import { PageNotFoundComponent as HomeComponent } from './not-found.component';
// #docregion route-config
const appRoutes: Routes = [
// #docregion route-defs
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent },
// #enddocregion hero-detail-route
{ path: 'crisis-center', component: CrisisListComponent },
{
path: 'heroes',
component: HeroListComponent,
data: {
title: 'Heroes List'
}
},
{ path: '', component: HomeComponent },
// #enddocregion route-defs
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
// #docregion route-defs
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent },
// #enddocregion hero-detail-route
{ path: 'crisis-center', component: CrisisListComponent },
{
path: 'heroes',
component: HeroListComponent,
data: {
title: 'Heroes List'
}
},
{ path: '', component: HomeComponent },
// #enddocregion route-defs
{ path: '**', component: PageNotFoundComponent }
])
RouterModule.forRoot(appRoutes)
],
declarations: [
AppComponent,

22
public/docs/_examples/router/ts/app/app.module.1.ts
View File

@ -1,10 +1,10 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
// #docregion import-router, route-config
import { RouterModule } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';
// #enddocregion import-router, route-config
// #docregion router-basics
@ -12,16 +12,18 @@ import { AppComponent } from './app.component';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
// #docregion route-config
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent }
];
// #enddocregion route-config
@NgModule({
imports: [
BrowserModule,
FormsModule,
// #docregion route-config
RouterModule.forRoot([
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent }
])
// #enddocregion route-config
RouterModule.forRoot(appRoutes)
],
declarations: [
AppComponent,

44
public/docs/_examples/router/ts/app/app.routing.1.ts
View File

@ -1,44 +0,0 @@
// #docplaster
// #docregion
// #docregion route-config
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// #enddocregion route-config
// #enddocregion
// #docregion base-routes
import { HeroListComponent } from './hero-list.component';
import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
import { HeroDetailComponent } from './heroes/hero-detail.component';
import { PageNotFoundComponent } from './not-found.component';
import { PageNotFoundComponent as HomeComponent } from './not-found.component';
// #enddocregion base-routes
// #docregion
// #docregion route-config
const appRoutes: Routes = [
// #docregion route-defs
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent },
// #enddocregion hero-detail-route
{ path: 'crisis-center', component: CrisisCenterComponent },
{
path: 'heroes',
component: HeroListComponent,
data: {
title: 'Heroes List'
}
},
{ path: '', component: HomeComponent },
// #enddocregion route-defs
{ path: '**', component: PageNotFoundComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
// #enddocregion route-config
// #enddocregion

22
public/docs/_examples/router/ts/app/app.routing.2.ts
View File

@ -1,22 +0,0 @@
// #docplaster
// #docregion
import { ModuleWithProviders } from '@angular/core';
// #docregion route-config
import { Routes, RouterModule } from '@angular/router';
// #enddocregion route-config
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
// #docregion route-config
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
// #enddocregion route-config

16
public/docs/_examples/router/ts/app/app.routing.3.ts
View File

@ -1,16 +0,0 @@
// #docplaster
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisCenterComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

13
public/docs/_examples/router/ts/app/app.routing.4.ts
View File

@ -1,13 +0,0 @@
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
];
export const appRoutingProviders: any[] = [
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

16
public/docs/_examples/router/ts/app/app.routing.5.ts
View File

@ -1,16 +0,0 @@
// // #docregion
// import { ModuleWithProviders } from '@angular/core';
// import { Routes, RouterModule } from '@angular/router';
//
// import { loginRoutes,
// authProviders } from './login.routing';
//
// const appRoutes: Routes = [
// ...loginRoutes
// ];
//
// export const appRoutingProviders: any[] = [
// authProviders
// ];
//
// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

21
public/docs/_examples/router/ts/app/app.routing.6.ts
View File

@ -1,21 +0,0 @@
// // #docregion
// import { ModuleWithProviders } from '@angular/core';
// // #docregion import-router
// import { Routes, RouterModule } from '@angular/router';
// // #enddocregion import-router
//
// import { loginRoutes,
// authProviders } from './login.routing';
//
// import { CanDeactivateGuard } from './can-deactivate-guard.service';
//
// const appRoutes: Routes = [
// ...loginRoutes
// ];
//
// export const appRoutingProviders: any[] = [
// authProviders,
// CanDeactivateGuard
// ];
//
// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

40
public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
View File

@ -1,7 +1,7 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
@ -9,30 +9,32 @@ import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
// #docregion routes
@NgModule({
imports: [
RouterModule.forChild([
const crisisCenterRoutes: Routes = [
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: 'crisis-center',
component: CrisisCenterComponent,
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent
},
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
component: CrisisCenterHomeComponent
}
]
}
])
]
}
];
@NgModule({
imports: [
RouterModule.forChild(crisisCenterRoutes)
],
exports: [
RouterModule

78
public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
View File

@ -1,7 +1,7 @@
// #docplaster
// #docregion routes
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
@ -18,50 +18,52 @@ import { CrisisDetailResolve } from './crisis-detail-resolve.service';
// #enddocregion crisis-detail-resolve
// #docregion routes
@NgModule({
imports: [
RouterModule.forChild([
// #enddocregion routes
// #docregion redirect, routes
const crisisCenterRoutes: Routes = [
// #enddocregion routes
// #docregion redirect, routes
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
// #enddocregion redirect, routes
// #docregion routes
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
// #enddocregion redirect, routes
// #docregion routes
{
path: 'crisis-center',
component: CrisisCenterComponent,
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
// #enddocregion routes
// #docregion can-deactivate-guard
canDeactivate: [CanDeactivateGuard],
// #enddocregion can-deactivate-guard
// #docregion crisis-detail-resolve
resolve: {
crisis: CrisisDetailResolve
}
// #enddocregion crisis-detail-resolve
// #docregion routes
},
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
// #enddocregion routes
// #docregion can-deactivate-guard
canDeactivate: [CanDeactivateGuard],
// #enddocregion can-deactivate-guard
// #docregion crisis-detail-resolve
resolve: {
crisis: CrisisDetailResolve
}
// #enddocregion crisis-detail-resolve
// #docregion routes
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
component: CrisisCenterHomeComponent
}
]
}
// #docregion routes
])
]
}
// #docregion routes
];
@NgModule({
imports: [
RouterModule.forChild(crisisCenterRoutes)
],
exports: [
RouterModule

50
public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
View File

@ -1,7 +1,7 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
@ -11,36 +11,38 @@ import { CrisisDetailComponent } from './crisis-detail.component';
// #docregion can-deactivate-guard
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
@NgModule({
imports: [
RouterModule.forChild([
const crisisCenterRoutes: Routes = [
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
{
path: 'crisis-center',
component: CrisisCenterComponent,
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard]
},
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard]
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
component: CrisisCenterHomeComponent
}
]
}
])
]
}
];
@NgModule({
imports: [
RouterModule.forChild(crisisCenterRoutes)
],
exports: [
RouterModule

60
public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts
View File

@ -1,7 +1,7 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
@ -13,41 +13,43 @@ import { CanDeactivateGuard } from '../can-deactivate-guard.service';
// #docregion crisis-detail-resolve
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
@NgModule({
imports: [
RouterModule.forChild([
// #docregion redirect
const crisisCenterRoutes: Routes = [
// #docregion redirect
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
// #enddocregion redirect
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
// #enddocregion redirect
{
path: 'crisis-center',
component: CrisisCenterComponent,
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolve
}
},
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolve
}
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
component: CrisisCenterHomeComponent
}
]
}
])
]
}
];
@NgModule({
imports: [
RouterModule.forChild(crisisCenterRoutes)
],
exports: [
RouterModule

46
public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
View File

@ -1,7 +1,7 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
@ -13,34 +13,36 @@ import { CanDeactivateGuard } from '../can-deactivate-guard.service';
// #docregion crisis-detail-resolve
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
@NgModule({
imports: [
RouterModule.forChild([
const crisisCenterRoutes: Routes = [
{
path: '',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisCenterComponent,
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolve
}
},
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolve
}
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
component: CrisisCenterHomeComponent
}
]
}
])
]
}
];
@NgModule({
imports: [
RouterModule.forChild(crisisCenterRoutes)
],
exports: [
RouterModule

2
public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
View File

@ -10,7 +10,7 @@ export class CrisisDetailResolve implements Resolve<Crisis> {
constructor(private cs: CrisisService, private router: Router) {}
resolve(route: ActivatedRouteSnapshot): Promise<Crisis>|boolean {
let id = +route.params['id'];
let id = route.params['id'];
return this.cs.getCrisis(id).then(crisis => {
if (crisis) {

27
public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
View File

@ -1,5 +1,6 @@
// #docplaster
// #docregion
import 'rxjs/add/operator/switchMap';
import { Component, OnInit,
HostBinding, trigger, transition,
animate, style, state } from '@angular/core';
@ -12,9 +13,9 @@ import { DialogService } from '../dialog.service';
// #docregion template
template: `
<div *ngIf="crisis">
<h3>"{{editName}}"</h3>
<h3>"{{ editName }}"</h3>
<div>
<label>Id: </label>{{crisis.id}}</div>
<label>Id: </label>{{ crisis.id }}</div>
<div>
<label>Name: </label>
<input [(ngModel)]="editName" placeholder="name"/>
@ -74,21 +75,19 @@ export class CrisisDetailComponent implements OnInit {
private router: Router,
private route: ActivatedRoute,
public dialogService: DialogService
) { }
) {}
// #docregion ngOnInit
ngOnInit() {
this.route.params.forEach((params: Params) => {
let id = +params['id'];
this.service.getCrisis(id)
.then(crisis => {
if (crisis) {
this.editName = crisis.name;
this.crisis = crisis;
} else { // id not found
this.gotoCrises();
}
});
this.route.params
.switchMap((params: Params) => this.service.getCrisis(params['id']))
.subscribe((crisis: Crisis) => {
if (crisis) {
this.editName = crisis.name;
this.crisis = crisis;
} else { // id not found
this.gotoCrises();
}
});
}
// #enddocregion ngOnInit

15
public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
View File

@ -11,9 +11,9 @@ import { DialogService } from '../dialog.service';
@Component({
template: `
<div *ngIf="crisis">
<h3>"{{editName}}"</h3>
<h3>"{{ editName }}"</h3>
<div>
<label>Id: </label>{{crisis.id}}</div>
<label>Id: </label>{{ crisis.id }}</div>
<div>
<label>Name: </label>
<input [(ngModel)]="editName" placeholder="name"/>
@ -70,14 +70,15 @@ export class CrisisDetailComponent implements OnInit {
private route: ActivatedRoute,
private router: Router,
public dialogService: DialogService
) { }
) {}
// #docregion crisis-detail-resolve
ngOnInit() {
this.route.data.forEach((data: { crisis: Crisis }) => {
this.editName = data.crisis.name;
this.crisis = data.crisis;
});
this.route.data
.subscribe((data: { crisis: Crisis }) => {
this.editName = data.crisis.name;
this.crisis = data.crisis;
});
}
// #enddocregion crisis-detail-resolve

32
public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
View File

@ -1,49 +1,45 @@
// #docplaster
// #docregion
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { Crisis, CrisisService } from './crisis.service';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
@Component({
// #docregion template
template: `
<ul class="items">
<li *ngFor="let crisis of crises"
<li *ngFor="let crisis of crises | async"
(click)="onSelect(crisis)">
<span class="badge">{{crisis.id}}</span> {{crisis.name}}
<span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
</li>
</ul>
`,
// #enddocregion template
})
export class CrisisListComponent implements OnInit, OnDestroy {
crises: Crisis[];
export class CrisisListComponent implements OnInit {
crises: Observable<Crisis[]>;
selectedId: number;
private sub: Subscription;
// #docregion relative-navigation-ctor
constructor(
private service: CrisisService,
private route: ActivatedRoute,
private router: Router) {}
private router: Router
) {}
// #enddocregion relative-navigation-ctor
ngOnInit() {
this.sub = this.route
.params
.subscribe(params => {
this.crises = this.route.params
.switchMap((params: Params) => {
this.selectedId = +params['id'];
this.service.getCrises()
.then(crises => this.crises = crises);
return this.service.getCrises();
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
// #docregion select
onSelect(crisis: Crisis) {
// Absolute link

23
public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
View File

@ -1,17 +1,20 @@
// #docplaster
// #docregion
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Crisis, CrisisService } from './crisis.service';
@Component({
template: `
<ul class="items">
<li *ngFor="let crisis of crises"
<li *ngFor="let crisis of crises | async"
[class.selected]="isSelected(crisis)"
(click)="onSelect(crisis)">
<span class="badge">{{crisis.id}}</span> {{crisis.name}}
<span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
</li>
</ul>
@ -19,25 +22,25 @@ import { Crisis, CrisisService } from './crisis.service';
`
})
export class CrisisListComponent implements OnInit {
crises: Crisis[];
public selectedId: number;
crises: Observable<Crisis[]>;
selectedId: number;
constructor(
private service: CrisisService,
private route: ActivatedRoute,
private router: Router
) { }
) {}
isSelected(crisis: Crisis) {
return crisis.id === this.selectedId;
}
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.selectedId = params['id'];
this.service.getCrises()
.then(crises => this.crises = crises);
});
this.crises = this.route.params
.switchMap((params: Params) => {
this.selectedId = +params['id'];
return this.service.getCrises();
});
}
// #docregion relative-navigation

19
public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
View File

@ -1,5 +1,8 @@
// #docplaster
// #docregion
// #docregion rxjs-operator-import
import 'rxjs/add/operator/switchMap';
// #enddocregion rxjs-operator-import
import { Component, OnInit } from '@angular/core';
// #docregion imports
import { Router, ActivatedRoute, Params } from '@angular/router';
@ -11,9 +14,9 @@ import { Hero, HeroService } from './hero.service';
template: `
<h2>HEROES</h2>
<div *ngIf="hero">
<h3>"{{hero.name}}"</h3>
<h3>"{{ hero.name }}"</h3>
<div>
<label>Id: </label>{{hero.id}}</div>
<label>Id: </label>{{ hero.id }}</div>
<div>
<label>Name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
@ -37,14 +40,16 @@ export class HeroDetailComponent implements OnInit {
// #docregion ngOnInit
ngOnInit() {
this.route.params.forEach((params: Params) => {
let id = +params['id']; // (+) converts string 'id' to a number
this.service.getHero(id).then(hero => this.hero = hero);
});
this.route.params
// (+) converts string 'id' to a number
.switchMap((params: Params) => this.service.getHero(+params['id']))
.subscribe((hero: Hero) => this.hero = hero);
}
// #enddocregion ngOnInit
// #docregion gotoHeroes
gotoHeroes() { this.router.navigate(['/heroes']); }
gotoHeroes() {
this.router.navigate(['/heroes']);
}
// #enddocregion gotoHeroes
}

15
public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
View File

@ -9,9 +9,9 @@ import { Hero, HeroService } from './hero.service';
template: `
<h2>HEROES</h2>
<div *ngIf="hero">
<h3>"{{hero.name}}"</h3>
<h3>"{{ hero.name }}"</h3>
<div>
<label>Id: </label>{{hero.id}}</div>
<label>Id: </label>{{ hero.id }}</div>
<div>
<label>Name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
@ -28,15 +28,20 @@ export class HeroDetailComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router,
private service: HeroService) {}
private service: HeroService
) {}
// #docregion snapshot
ngOnInit() {
// (+) converts string 'id' to a number
let id = +this.route.snapshot.params['id'];
this.service.getHero(id).then(hero => this.hero = hero);
this.service.getHero(id)
.then((hero: Hero) => this.hero = hero);
}
// #enddocregion snapshot
gotoHeroes() { this.router.navigate(['/heroes']); }
gotoHeroes() {
this.router.navigate(['/heroes']);
}
}

18
public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
View File

@ -1,5 +1,8 @@
// #docplaster
// #docregion
// #docregion rxjs-operator-import
import 'rxjs/add/operator/switchMap';
// #docregion rxjs-operator-import
// #docregion route-animation-imports
import { Component, OnInit, HostBinding,
trigger, transition, animate,
@ -14,9 +17,9 @@ import { Hero, HeroService } from './hero.service';
template: `
<h2>HEROES</h2>
<div *ngIf="hero">
<h3>"{{hero.name}}"</h3>
<h3>"{{ hero.name }}"</h3>
<div>
<label>Id: </label>{{hero.id}}</div>
<label>Id: </label>{{ hero.id }}</div>
<div>
<label>Name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
@ -71,15 +74,16 @@ export class HeroDetailComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router,
private service: HeroService) {}
private service: HeroService
) {}
// #enddocregion ctor
// #docregion ngOnInit
ngOnInit() {
this.route.params.forEach((params: Params) => {
let id = +params['id']; // (+) converts string 'id' to a number
this.service.getHero(id).then(hero => this.hero = hero);
});
this.route.params
// (+) converts string 'id' to a number
.switchMap((params: Params) => this.service.getHero(+params['id']))
.subscribe((hero: Hero) => this.hero = hero);
}
// #enddocregion ngOnInit

11
public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
View File

@ -11,25 +11,26 @@ import { Hero, HeroService } from './hero.service';
template: `
<h2>HEROES</h2>
<ul class="items">
<li *ngFor="let hero of heroes"
<li *ngFor="let hero of heroes | async"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
<span class="badge">{{ hero.id }}</span> {{ hero.name }}
</li>
</ul>
`
// #enddocregion template
})
export class HeroListComponent implements OnInit {
heroes: Hero[];
heroes: Promise<Hero[]>;
// #docregion ctor
constructor(
private router: Router,
private service: HeroService) { }
private service: HeroService
) {}
// #enddocregion ctor
ngOnInit() {
this.service.getHeroes().then(heroes => this.heroes = heroes);
this.heroes = this.service.getHeroes();
}
// #docregion select

20
public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
View File

@ -1,6 +1,10 @@
// #docplaster
// #docregion
// TODO SOMEDAY: Feature Componetized like CrisisCenter
// #docregion rxjs-imports
import 'rxjs/add/operator/switchMap';
import { Observable } from 'rxjs/Observable';
// #enddocregion rxjs-imports
import { Component, OnInit } from '@angular/core';
// #docregion import-router
import { Router, ActivatedRoute, Params } from '@angular/router';
@ -13,19 +17,19 @@ import { Hero, HeroService } from './hero.service';
template: `
<h2>HEROES</h2>
<ul class="items">
<li *ngFor="let hero of heroes"
<li *ngFor="let hero of heroes | async"
[class.selected]="isSelected(hero)"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
<span class="badge">{{ hero.id }}</span> {{ hero.name }}
</li>
</ul>
`
// #enddocregion template
})
// #docregion ctor
export class HeroListComponent implements OnInit {
heroes: Hero[];
heroes: Observable<Hero[]>;
// #docregion ctor
private selectedId: number;
constructor(
@ -36,10 +40,10 @@ export class HeroListComponent implements OnInit {
// #enddocregion ctor
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.heroes = this.route.params
.switchMap((params: Params) => {
this.selectedId = +params['id'];
this.service.getHeroes()
.then(heroes => this.heroes = heroes);
return this.service.getHeroes();
});
}
// #enddocregion ctor
@ -53,6 +57,6 @@ export class HeroListComponent implements OnInit {
this.router.navigate(['/hero', hero.id]);
}
// #enddocregion select
// #docregion ctor
}
// #enddocregion

18
public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
View File

@ -1,18 +1,20 @@
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroListComponent } from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';
const heroesRoutes: Routes = [
{ path: 'heroes', component: HeroListComponent },
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent }
// #enddocregion hero-detail-route
];
@NgModule({
imports: [
RouterModule.forChild([
{ path: 'heroes', component: HeroListComponent },
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent }
// #enddocregion hero-detail-route
])
RouterModule.forChild(heroesRoutes)
],
exports: [
RouterModule

18
public/docs/_examples/router/ts/app/login-routing.module.ts
View File

@ -1,15 +1,17 @@
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AuthGuard } from './auth-guard.service';
import { AuthService } from './auth.service';
import { LoginComponent } from './login.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth-guard.service';
import { AuthService } from './auth.service';
import { LoginComponent } from './login.component';
const loginRoutes: Routes = [
{ path: 'login', component: LoginComponent }
];
@NgModule({
imports: [
RouterModule.forChild([
{ path: 'login', component: LoginComponent }
])
RouterModule.forChild(loginRoutes)
],
exports: [
RouterModule

1
public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
View File

@ -6,4 +6,3 @@ import { Component } from '@angular/core';
template: '<h3>My Dashboard</h3>'
})
export class DashboardComponent { }

2
public/docs/_examples/toh-5/ts/app/hero-detail.component.html
View File

@ -11,4 +11,4 @@
<!-- #docregion back-button -->
<button (click)="goBack()">Back</button>
<!-- #enddocregion back-button -->
</div>
</div>

12
public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
View File

@ -1,5 +1,7 @@
// #docplaster
// #docregion , v2
// #docregion , v2, rxjs-import
import 'rxjs/add/operator/switchMap';
// #enddocregion rxjs-import
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
@ -31,11 +33,9 @@ export class HeroDetailComponent implements OnInit {
// #docregion ngOnInit
ngOnInit(): void {
this.route.params.forEach((params: Params) => {
let id = +params['id'];
this.heroService.getHero(id)
.then(hero => this.hero = hero);
});
this.route.params
.switchMap((params: Params) => this.heroService.getHero(+params['id']))
.subscribe(hero => this.hero = hero);
}
// #enddocregion ngOnInit

9
public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
View File

@ -1,4 +1,5 @@
// #docregion
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
@ -22,11 +23,9 @@ export class HeroDetailComponent implements OnInit {
) {}
ngOnInit(): void {
this.route.params.forEach((params: Params) => {
let id = +params['id'];
this.heroService.getHero(id)
.then(hero => this.hero = hero);
});
this.route.params
.switchMap((params: Params) => this.heroService.getHero(+params['id']))
.subscribe(hero => this.hero = hero);
}
// #docregion save

48
public/docs/ts/latest/guide/router.jade
View File

@ -445,7 +445,7 @@ h4#define-routes Define routes
:marked
Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations.
As our application grows, we'll want to refactor our routing configuration into a separate file
and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicating for the purpose
and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicated for the purpose
of routing in feature modules.
:marked
@ -874,6 +874,11 @@ h3#activated-route ActivatedRoute: the one-stop-shop for route information
+makeExcerpt('app/heroes/hero-detail.component.1.ts (activated route)', 'imports')
:marked
We import the `switchMap` operator because we need it later to process the `Observable` route parameters.
+makeExcerpt('app/heroes/hero-detail.component.1.ts (switchMap operator import)', 'rxjs-operator-import')
a#hero-detail-ctor
:marked
As usual, we write a constructor that asks Angular to inject services
@ -882,13 +887,22 @@ a#hero-detail-ctor
+makeExcerpt('app/heroes/hero-detail.component.ts (constructor)', 'ctor')
:marked
Later, in the `ngOnInit` method,
we use the `ActivatedRoute` service to retrieve the parameters for our route.
Since our parameters are provided as an `Observable`, we use the _forEach_ method to retrieve them for the `id` parameter by name and
tell the `HeroService` to fetch the hero with that `id`.
Later, in the `ngOnInit` method, we use the `ActivatedRoute` service to retrieve the parameters
for our route. Since our parameters are provided as an `Observable`, we use the _switchMap_ operator to
provide them for the `id` parameter by name and tell the `HeroService` to fetch the hero with that `id`.
+makeExcerpt('app/heroes/hero-detail.component.ts (ngOnInit)', 'ngOnInit')
.l-sub-section
:marked
The `switchMap` operator allows you to perform an action with the current value of the `Observable`,
and map it to a new `Observable`. As with many `rxjs` operators, `switchMap` handles
an `Observable` as well as a `Promise` to retrieve the value they emit.
The `switchMap` operator will also cancel any in-flight requests if our user re-navigates to the route
while still retrieving a hero. Our `Observable` is _cold_ until subscribed to, so we use the `subscribe` method
to get and set our retrieved `Hero`.
.l-sub-section
:marked
Angular calls the `ngOnInit` method shortly after creating an instance of the `HeroDetailComponent`.
@ -1096,10 +1110,20 @@ code-example(language="bash").
+makeExcerpt('app/heroes/hero-list.component.ts (import)', 'import-router')
:marked
Then we use the `ActivatedRoute` to access the `params` _Observable_ so we can subscribe
and extract the `id` parameter as the `selectedId`:
We'll import the `switchMap` operator to perform an operation on our `Observable`
of route parameters.
+makeExcerpt('app/heroes/hero-list.component.ts (constructor)', 'ctor')
+makeExcerpt('app/heroes/hero-list.component.ts (rxjs imports)', 'rxjs-imports')
:marked
Then we inject the `ActivatedRoute` in the `HeroListComponent` constructor.
+makeExcerpt('app/heroes/hero-list.component.ts (constructor and ngOnInit)', 'ctor')
:marked
The ActivatedRoute.params property is an Observable of route parameters. The params emits new id values
when the user navigates to the component. In ngOnInit we subscribe to those values, set the selectedId,
and get the heroes.
.l-sub-section
:marked
@ -2150,7 +2174,7 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
The *Router* also supports [custom preloading strategies](#custom-preloading) for fine control over which modules to pre-load.
We'll update our *CrisisCenterModule* to be loaded lazily by default and use the `PreloadAllModules` strategy
We'll update our *CrisisCenterModule* to be loaded lazily by default and use the `PreloadAllModules` strategy
to load _all_ lazy loaded modules as soon as possible.
<a id="preload-canload"></a>
@ -2183,9 +2207,9 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
`)
:marked
The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options.
The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options.
We import the `PreloadAllModules` token from the router package and set the configuration option's `preloadingStrategy` property
with this `PreloadAllModules` token.
with this `PreloadAllModules` token.
This tells the built-in *Router* pre-loader to immediately load **all** [unguarded](#preload-canload) feature areas that use `loadChildren`.
+makeExcerpt('app/app-routing.module.6.ts (preload all)', '')
@ -2207,7 +2231,7 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
Since we want to take advantage of this, we'll add a custom strategy that _only_ preloads the modules we select. We'll enable the preloading by using the *Route Data*,
which, as we learned, is an object to store arbitrary route data and and [resolve data](#resolve-guard).
We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add
We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add
the `route.path` to the `preloadedModules` array in our custom strategy service. We'll also log a message
to the console for the preloaded module.

29
public/docs/ts/latest/tutorial/toh-pt5.jade
View File

@ -511,6 +511,11 @@ block route-params
+makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
:marked
We'll also import the `switchMap` operator to use later with the route parameters `Observable`.
+makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import')
:marked
We tell the class that we want to implement the `OnInit` interface.
@ -526,14 +531,26 @@ block ngOnInit
block extract-id
:marked
Notice how we extract the `id` by calling the `forEach` method
which will deliver our !{_array} of route parameters.
Note how the `switchMap` operator maps the id in the observable route parameters
to a new `Observable`, the result of the `HeroService.getHero` method.
If the user re-navigates to this component while a getHero request is still inflight,
switchMap cancels that old request before calling `HeroService.getHero` again.
- var _str2int = _docsFor == 'dart' ? '<code>int.parse</code> static method' : 'JavaScript (+) operator'
:marked
The hero `id` is a number. Route parameters are *always strings*.
So we convert the route parameter value to a number with the !{_str2int}.
.l-sub-section
:marked
### Do I need to unsubscribe?
The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes
the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`.
:marked
### Add *HeroService.getHero*
The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
@ -654,16 +671,16 @@ block extract-id
+makeExample('app/app-routing.module.ts')
:marked
Noteworthy points, typical of _Routing Modules_:
* Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
* Pulls the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
* Add `RouterModule.forRoot(routes)` to `imports`.
* Adds `RouterModule.forRoot(routes)` to `imports`.
* Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables
* Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables
such as `RouterLink` and `RouterOutlet`.
* No `declarations`! Declarations are the responsibility of the companion module.
* Add module `providers` for guard services if you have them; there are none in this example.
* Adds module `providers` for guard services if you have them; there are none in this example.
### Update _AppModule_