docs(toh-5/dart): use routerLink in dashboard

Author: chalin

public/docs/_examples/toh-5/dart/lib/dashboard_component.dart

@@ -4,33 +4,37 @@
 import 'dart:async';
 
 import 'package:angular2/core.dart';
+// #docregion import-router
+import 'package:angular2/router.dart';
+// #enddocregion import-router
 
 import 'hero.dart';
 import 'hero_service.dart';
 // #enddocregion imports
 
+// #docregion metadata
 @Component(
     selector: 'my-dashboard',
     // #docregion templateUrl
     templateUrl: 'dashboard_component.html',
     // #enddocregion templateUrl
     // #docregion css
-    styleUrls: const ['dashboard_component.css']
+    styleUrls: const ['dashboard_component.css'],
     // #enddocregion css
+    directives: const [ROUTER_DIRECTIVES],
     )
-// #docregion component
+// #enddocregion metadata
+// #docregion class, component
 class DashboardComponent implements OnInit {
   List<Hero> heroes;
 
   // #docregion ctor
   final HeroService _heroService;
 
   DashboardComponent(this._heroService);
-
   // #enddocregion ctor
 
   Future<Null> ngOnInit() async {
     heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 }
-// #enddocregion component

public/docs/_examples/toh-5/dart/lib/dashboard_component.html

@@ -2,7 +2,7 @@
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
   <!-- #docregion click -->
-  <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
+  <a *ngFor="let hero of heroes" [routerLink]="['./HeroDetail', {id: hero.id}]" class="col-1-4">
   <!-- #enddocregion click -->
     <div class="module hero">
       <h4>{{hero.name}}</h4>