Angular 2 - Do something when my Observable is complete

The Angular2 - http example goes into some detail about using the new http module.

For me it leaves out two things.

  1. How to do a get with a url parameter
  2. How do you do something after your observable has completed
How to do a get with a url parameter

Concatenate the strings. I haven't seen anything yet like how $http would do it. I believe http is still a work in progress.

How do you do something after your observable has completed

So the subscribe function takes three parameters:
onNext
onError
onCompleted

The first two are used in all the Angular2 examples. The third is not.

Now for me coming to this without a Typescript background I am still getting used to arrow functions. So first I tried:

this._heroService.addHero(this.hero).subscribe(  
      hero=> this.hero= hero,
      error => console.log("Error: ", error),
      function(){ this._router.navigate(['HeroDetail', { id: this.hero.id }]) }
    );

But this does not work, just like classic JavaScript the this is not my component it is in fact the observable, the object that called my function.

So with a bit of googling about typescript, SO to the rescue, if found that the correct way to use arrow functions with no parameters is

() => console.log("onComplete")

The TypeScript specs (p.64) say that:

A function expression using the function keyword introduces a new dynamically bound this, whereas an arrow function expression preserves the this of its enclosing context. Arrow function expressions are particularly useful for writing callbacks, which otherwise often have an undefined or unexpected this. In the example

class Messenger {     message = "Hello World";     start() {         setTimeout(() => alert(this.message), 3000);     } };  
var messenger = new Messenger(); messenger.start();  

the use of an arrow function expression causes the callback to have the same this as the surrounding 'start' method. Writing the callback as a standard function expression it becomes necessary to manually arrange access to the surrounding this, for example by copying it into a local variable:

Applying it to the hero service where I wanted to navigate to the detail view of my hero:

this._heroService.addHero(this.hero).subscribe(  
      hero=> this.hero= hero,
      error => console.log("Error: ", error),
      () => this._router.navigate(['HeroDetail', { id: this.hero.id }])
    );