cargdev/angular
1
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Updated router guide content and examples for paramMap

Browse Source 
and queryParamMap, tracing, and incidental improvements.
closes #16991 and #16259 which it also fixes.
This commit is contained in:
Brandon Roberts
2017-06-18 21:09:02 -05:00
committed by Matias Niemelä
parent 5f1dcfc228
commit 2c1ef08466
38 changed files with 487 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/examples/ngmodule/src/app/crisis/crisis-detail.component.ts
View File

@ -14,6 +14,6 @@ export class CrisisDetailComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.id = parseInt(this.route.snapshot.params['id'], 10);
this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
}
}

2
aio/content/examples/ngmodule/src/app/hero/hero-detail.component.ts
View File

@ -25,7 +25,7 @@ export class HeroDetailComponent implements OnInit {
private heroService: HeroService) { }
ngOnInit() {
let id = parseInt(this.route.snapshot.params['id'], 10);
let id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
this.heroService.getHero(id).then(hero => this.hero = hero);
}
}

4
aio/content/examples/router/src/app/admin/admin-dashboard.component.2.ts
View File

@ -22,8 +22,8 @@ export class AdminDashboardComponent implements OnInit {
ngOnInit() {
// Capture the session ID if available
this.sessionId = this.route
.queryParams
.map(params => params['session_id'] || 'None');
.queryParamMap
.map(params => params.get('session_id') || 'None');
// Capture the fragment if available
this.token = this.route

4
aio/content/examples/router/src/app/admin/admin-dashboard.component.ts
View File

@ -36,8 +36,8 @@ export class AdminDashboardComponent implements OnInit {
ngOnInit() {
// Capture the session ID if available
this.sessionId = this.route
.queryParams
.map(params => params['session_id'] || 'None');
.queryParamMap
.map(params => params.get('session_id') || 'None');
// Capture the fragment if available
this.token = this.route

5
aio/content/examples/router/src/app/app-routing.module.1.ts
View File

@ -17,7 +17,10 @@ const appRoutes: Routes = [
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
exports: [
RouterModule

5
aio/content/examples/router/src/app/app-routing.module.2.ts
View File

@ -15,7 +15,10 @@ const appRoutes: Routes = [
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
exports: [
RouterModule

5
aio/content/examples/router/src/app/app-routing.module.3.ts
View File

@ -22,7 +22,10 @@ const appRoutes: Routes = [
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
exports: [
RouterModule

5
aio/content/examples/router/src/app/app-routing.module.4.ts
View File

@ -18,7 +18,10 @@ const appRoutes: Routes = [
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
exports: [
RouterModule

5
aio/content/examples/router/src/app/app-routing.module.5.ts
View File

@ -33,7 +33,10 @@ const appRoutes: Routes = [
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
exports: [
RouterModule

7
aio/content/examples/router/src/app/app-routing.module.6.ts
View File

@ -37,9 +37,12 @@ const appRoutes: Routes = [
imports: [
// #docregion forRoot
RouterModule.forRoot(
appRoutes
appRoutes,
// #enddocregion preload-v1
, { preloadingStrategy: PreloadAllModules }
{
enableTracing: true, // <-- debugging purposes only
preloadingStrategy: PreloadAllModules
}
// #docregion preload-v1
)
// #enddocregion forRoot

6
aio/content/examples/router/src/app/app-routing.module.ts
View File

@ -36,7 +36,11 @@ const appRoutes: Routes = [
imports: [
RouterModule.forRoot(
appRoutes,
{ preloadingStrategy: SelectivePreloadingStrategy }
{
enableTracing: true, // <-- debugging purposes only
preloadingStrategy: SelectivePreloadingStrategy,
}
)
],
exports: [

5
aio/content/examples/router/src/app/app.module.0.ts
View File

@ -26,7 +26,10 @@ const appRoutes: Routes = [
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
// other imports here
],
// #enddocregion

5
aio/content/examples/router/src/app/app.module.1.ts
View File

@ -33,7 +33,10 @@ const appRoutes: Routes = [
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes)
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
declarations: [
AppComponent,

2
aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts
View File

@ -15,7 +15,7 @@ export class CanDeactivateGuard implements CanDeactivate<CrisisDetailComponent>
state: RouterStateSnapshot
): Promise<boolean> | boolean {
// Get the Crisis Center ID
console.log(route.params['id']);
console.log(route.paramMap.get('id'));
// Get the current URL
console.log(state.url);

4
aio/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts
View File

@ -1,13 +1,9 @@
// #docregion
// #docplaster
import { Component } from '@angular/core';
// #docregion minus-imports
@Component({
template: `
<p>Welcome to the Crisis Center</p>
`
})
export class CrisisCenterHomeComponent { }
// #enddocregion minus-imports
// #enddocregion

1
aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts
View File

@ -31,6 +31,7 @@ const crisisCenterRoutes: Routes = [
]
}
];
// #enddocregion routes
@NgModule({
imports: [

4
aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts
View File

@ -1,8 +1,6 @@
// #docregion
// #docplaster
import { Component } from '@angular/core';
// #docregion minus-imports
@Component({
template: `
<h2>CRISIS CENTER</h2>
@ -10,5 +8,3 @@ import { Component } from '@angular/core';
`
})
export class CrisisCenterComponent { }
// #enddocregion minus-imports
// #enddocregion

2
aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts
View File

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

6
aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts
View File

@ -2,7 +2,7 @@
// #docregion
import 'rxjs/add/operator/switchMap';
import { Component, OnInit, HostBinding } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { slideInDownAnimation } from '../animations';
import { Crisis, CrisisService } from './crisis.service';
@ -44,8 +44,8 @@ export class CrisisDetailComponent implements OnInit {
// #docregion ngOnInit
ngOnInit() {
this.route.params
.switchMap((params: Params) => this.service.getCrisis(params['id']))
this.route.paramMap
.switchMap((params: ParamMap) => this.service.getCrisis(params.get('id')))
.subscribe((crisis: Crisis) => {
if (crisis) {
this.editName = crisis.name;

8
aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts
View File

@ -1,7 +1,7 @@
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { Crisis, CrisisService } from './crisis.service';
import { Observable } from 'rxjs/Observable';
@ -31,9 +31,9 @@ export class CrisisListComponent implements OnInit {
) {}
ngOnInit() {
this.crises = this.route.params
.switchMap((params: Params) => {
this.selectedId = +params['id'];
this.crises = this.route.paramMap
.switchMap((params: ParamMap) => {
this.selectedId = +params.get('id');
return this.service.getCrises();
});
}

8
aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts
View File

@ -1,7 +1,7 @@
// #docregion
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { Observable } from 'rxjs/Observable';
@ -38,9 +38,9 @@ export class CrisisListComponent implements OnInit {
}
ngOnInit() {
this.crises = this.route.params
.switchMap((params: Params) => {
this.selectedId = +params['id'];
this.crises = this.route.paramMap
.switchMap((params: ParamMap) => {
this.selectedId = +params.get('id');
return this.service.getCrises();
});
}

8
aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts
View File

@ -5,7 +5,7 @@ import 'rxjs/add/operator/switchMap';
// #enddocregion rxjs-operator-import
import { Component, OnInit } from '@angular/core';
// #docregion imports
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
// #enddocregion imports
import { Hero, HeroService } from './hero.service';
@ -40,9 +40,9 @@ export class HeroDetailComponent implements OnInit {
// #docregion ngOnInit
ngOnInit() {
this.route.params
// (+) converts string 'id' to a number
.switchMap((params: Params) => this.service.getHero(+params['id']))
this.route.paramMap
.switchMap((params: ParamMap) =>
this.service.getHero(params.get('id')))
.subscribe((hero: Hero) => this.hero = hero);
}
// #enddocregion ngOnInit

3
aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts
View File

@ -33,8 +33,7 @@ export class HeroDetailComponent implements OnInit {
// #docregion snapshot
ngOnInit() {
// (+) converts string 'id' to a number
let id = +this.route.snapshot.params['id'];
let id = this.route.snapshot.paramMap.get('id');
this.service.getHero(id)
.then((hero: Hero) => this.hero = hero);

8
aio/content/examples/router/src/app/heroes/hero-detail.component.ts
View File

@ -4,7 +4,7 @@
import 'rxjs/add/operator/switchMap';
// #enddocregion rxjs-operator-import
import { Component, OnInit, HostBinding } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { slideInDownAnimation } from '../animations';
@ -47,9 +47,9 @@ export class HeroDetailComponent implements OnInit {
// #docregion ngOnInit
ngOnInit() {
this.route.params
// (+) converts string 'id' to a number
.switchMap((params: Params) => this.service.getHero(+params['id']))
this.route.paramMap
.switchMap((params: ParamMap) =>
this.service.getHero(params.get('id')))
.subscribe((hero: Hero) => this.hero = hero);
}
// #enddocregion ngOnInit

9
aio/content/examples/router/src/app/heroes/hero-list.component.ts
View File

@ -7,7 +7,7 @@ import { Observable } from 'rxjs/Observable';
// #enddocregion rxjs-imports
import { Component, OnInit } from '@angular/core';
// #docregion import-router
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
// #enddocregion import-router
import { Hero, HeroService } from './hero.service';
@ -41,9 +41,10 @@ export class HeroListComponent implements OnInit {
) {}
ngOnInit() {
this.heroes = this.route.params
.switchMap((params: Params) => {
this.selectedId = +params['id'];
this.heroes = this.route.paramMap
.switchMap((params: ParamMap) => {
// (+) before `params.get()` turns the string into a number
this.selectedId = +params.get('id');
return this.service.getHeroes();
});
}

1
aio/content/examples/router/src/app/heroes/hero.service.ts
View File

@ -22,6 +22,7 @@ export class HeroService {
getHero(id: number | string) {
return heroesPromise
// (+) before `id` turns the string into a number
.then(heroes => heroes.find(hero => hero.id === +id));
}
}

2
aio/content/examples/router/src/app/login.component.ts
View File

@ -38,7 +38,7 @@ export class LoginComponent {
// Set our navigation extras object
// that passes on our global query params and fragment
let navigationExtras: NavigationExtras = {
preserveQueryParams: true,
queryParamsHandling: 'preserve',
preserveFragment: true
};

2
aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
View File

@ -15,7 +15,7 @@ describe('HeroDetailComponent - no TestBed', () => {
beforeEach((done: any) => {
expectedHero = new Hero(42, 'Bubba');
activatedRoute = new ActivatedRouteStub();
activatedRoute.testParams = { id: expectedHero.id };
activatedRoute.testParamMap = { id: expectedHero.id };
router = jasmine.createSpyObj('router', ['navigate']);

10
aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
View File

@ -53,7 +53,7 @@ function overrideSetup() {
// #enddocregion hds-spy
// the `id` value is irrelevant because ignored by service stub
beforeEach(() => activatedRoute.testParams = { id: 99999 } );
beforeEach(() => activatedRoute.testParamMap = { id: 99999 } );
// #docregion setup-override
beforeEach( async(() => {
@ -158,7 +158,7 @@ function heroModuleSetup() {
beforeEach( async(() => {
expectedHero = firstHero;
activatedRoute.testParams = { id: expectedHero.id };
activatedRoute.testParamMap = { id: expectedHero.id };
createComponent();
}));
@ -229,7 +229,7 @@ function heroModuleSetup() {
// #docregion route-bad-id
describe('when navigate to non-existant hero id', () => {
beforeEach( async(() => {
activatedRoute.testParams = { id: 99999 };
activatedRoute.testParamMap = { id: 99999 };
createComponent();
}));
@ -279,7 +279,7 @@ function formsModuleSetup() {
it('should display 1st hero\'s name', fakeAsync(() => {
const expectedHero = firstHero;
activatedRoute.testParams = { id: expectedHero.id };
activatedRoute.testParamMap = { id: expectedHero.id };
createComponent().then(() => {
expect(page.nameDisplay.textContent).toBe(expectedHero.name);
});
@ -307,7 +307,7 @@ function sharedModuleSetup() {
it('should display 1st hero\'s name', fakeAsync(() => {
const expectedHero = firstHero;
activatedRoute.testParams = { id: expectedHero.id };
activatedRoute.testParamMap = { id: expectedHero.id };
createComponent().then(() => {
expect(page.nameDisplay.textContent).toBe(expectedHero.name);
});

2
aio/content/examples/testing/src/app/hero/hero-detail.component.ts
View File

@ -29,7 +29,7 @@ export class HeroDetailComponent implements OnInit {
// #docregion ng-on-init
ngOnInit(): void {
// get hero when `id` param changes
this.route.params.subscribe(p => this.getHero(p && p['id']));
this.route.paramMap.subscribe(p => this.getHero(p.has('id') && p.get('id')));
}
// #enddocregion ng-on-init

23
aio/content/examples/testing/src/testing/router-stubs.ts
View File

@ -30,28 +30,29 @@ export class RouterStub {
}
// Only implements params and part of snapshot.params
// Only implements params and part of snapshot.paramMap
// #docregion activated-route-stub
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { convertToParamMap, ParamMap } from '@angular/router';
@Injectable()
export class ActivatedRouteStub {
// ActivatedRoute.params is Observable
private subject = new BehaviorSubject(this.testParams);
params = this.subject.asObservable();
// ActivatedRoute.paramMap is Observable
private subject = new BehaviorSubject(convertToParamMap(this.testParamMap));
paramMap = this.subject.asObservable();
// Test parameters
private _testParams: {};
get testParams() { return this._testParams; }
set testParams(params: {}) {
this._testParams = params;
this.subject.next(params);
private _testParamMap: ParamMap;
get testParamMap() { return this._testParamMap; }
set testParamMap(params: {}) {
this._testParamMap = convertToParamMap(params);
this.subject.next(this._testParamMap);
}
// ActivatedRoute.snapshot.params
// ActivatedRoute.snapshot.paramMap
get snapshot() {
return { params: this.testParams };
return { paramMap: this.testParamMap };
}
}
// #enddocregion activated-route-stub

4
aio/content/examples/toh-pt5/src/app/hero-detail.component.1.ts
View File

@ -5,7 +5,7 @@
// #docregion added-imports
// Keep the Input import for now, you'll remove it later:
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';
import { HeroService } from './hero.service';
@ -17,7 +17,7 @@ import { Hero } from './hero';
@Component({})
export class HeroDetailComponent implements OnInit {
@Input() hero: Hero;
bogus: Params;
bogus: ParamMap;
constructor(
private heroService: HeroService,

10
aio/content/examples/toh-pt5/src/app/hero-detail.component.ts
View File

@ -2,9 +2,9 @@
// #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';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@ -32,8 +32,8 @@ export class HeroDetailComponent implements OnInit {
// #docregion ngOnInit
ngOnInit(): void {
this.route.params
.switchMap((params: Params) => this.heroService.getHero(+params['id']))
this.route.paramMap
.switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
.subscribe(hero => this.hero = hero);
}
// #enddocregion ngOnInit

10
aio/content/examples/toh-pt6/src/app/hero-detail.component.ts
View File

@ -1,8 +1,8 @@
// #docregion
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@ -22,8 +22,8 @@ export class HeroDetailComponent implements OnInit {
) {}
ngOnInit(): void {
this.route.params
.switchMap((params: Params) => this.heroService.getHero(+params['id']))
this.route.paramMap
.switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
.subscribe(hero => this.hero = hero);
}

6
aio/content/examples/universal/src/app/hero-detail.component.ts
View File

@ -1,7 +1,7 @@
// #docregion
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';
import { Hero } from './hero';
@ -22,8 +22,8 @@ export class HeroDetailComponent implements OnInit {
) {}
ngOnInit(): void {
this.route.params
.switchMap((params: Params) => this.heroService.getHero(+params['id']))
this.route.paramMap
.switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
.subscribe(hero => this.hero = hero);
}

2
aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts
View File

@ -14,7 +14,7 @@ export class PhoneDetailComponent {
mainImageUrl: string;
constructor(activatedRoute: ActivatedRoute, phone: Phone) {
phone.get(activatedRoute.snapshot.params['phoneId'])
phone.get(activatedRoute.snapshot.paramMap.get('phoneId'))
.subscribe((p: PhoneData) => {
this.phone = p;
this.setImage(p.images[0]);