diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts index efbe8ee913..6713ce4dc7 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts @@ -5,7 +5,8 @@ // #docregion added-imports // Keep the Input import for now, we'll remove it later: import { Component, Input, OnInit } from '@angular/core'; -import { ActivatedRoute, Params } from '@angular/router'; +import { ActivatedRoute, Params } from '@angular/router'; +import { Location } from '@angular/common'; import { HeroService } from './hero.service'; // #enddocregion added-imports @@ -20,8 +21,9 @@ export class HeroDetailComponent implements OnInit { constructor( private heroService: HeroService, - private route: ActivatedRoute) { - } + private route: ActivatedRoute, + private location: Location + ) {} ngOnInit() {} } diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts index 5513904452..ef7fbec439 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts @@ -1,10 +1,11 @@ // #docplaster // #docregion , v2 -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; +import { Location } from '@angular/common'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; +import { Hero } from './hero'; +import { HeroService } from './hero.service'; @Component({ selector: 'my-hero-detail', @@ -22,8 +23,9 @@ export class HeroDetailComponent implements OnInit { // #docregion ctor constructor( private heroService: HeroService, - private route: ActivatedRoute) { - } + private route: ActivatedRoute, + private location: Location + ) {} // #enddocregion ctor // #docregion ngOnInit @@ -38,7 +40,7 @@ export class HeroDetailComponent implements OnInit { // #docregion goBack goBack(): void { - window.history.back(); + this.location.back(); } // #enddocregion goBack } diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts index 87333a9fe3..b063e54f65 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts @@ -1,6 +1,7 @@ // #docregion -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; +import { Location } from '@angular/common'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -15,8 +16,9 @@ export class HeroDetailComponent implements OnInit { constructor( private heroService: HeroService, - private route: ActivatedRoute) { - } + private route: ActivatedRoute, + private location: Location + ) {} ngOnInit(): void { this.route.params.forEach((params: Params) => { @@ -29,11 +31,11 @@ export class HeroDetailComponent implements OnInit { // #docregion save save(): void { this.heroService.update(this.hero) - .then(this.goBack); + .then(() => this.goBack()); } // #enddocregion save goBack(): void { - window.history.back(); + this.location.back(); } } diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 706f3fe790..ad59818b49 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -24,7 +24,7 @@ figure.image-display img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations") :marked - We'll add Angular’s *Component Router* to our app to satisfy these requirements. + We'll add Angular’s *Router* to our app to satisfy these requirements. .l-sub-section :marked @@ -166,7 +166,7 @@ block app-comp-v1 Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button. In other words, we'd like to navigate to the list of heroes. - We'll need the Angular *Component Router*. + We'll need the Angular *Router*. block angular-router :marked @@ -523,7 +523,7 @@ block route-params - var _ActivatedRoute = _docsFor == 'dart' ? 'RouteParams' : 'ActivatedRoute' :marked - Let's have the `!{_ActivatedRoute}` service and the `HeroService` injected + Let's have the `!{_ActivatedRoute}` service, the `HeroService` and the `Location` service injected into the constructor, saving their values in private fields: +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor') @@ -569,7 +569,8 @@ block extract-id How do we navigate somewhere else when we're done? The user could click one of the two links in the `AppComponent`. Or click the browser's back button. - We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack. + We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack + using the `Location` service we injected previously. +makeExcerpt('app/hero-detail.component.ts', 'goBack') @@ -901,7 +902,7 @@ block file-tree-end We travelled a great distance in this chapter - - We added the Angular *Component Router* to navigate among different components. + - We added the Angular *Router* to navigate among different components. - We learned how to create router links to represent navigation menu items. - We used router link parameters to navigate to the details of user selected hero. - We shared the `HeroService` among multiple components.