What's the proper way to set a Router & RouterLink in Angular2 Dart

Question

Question: What's the proper way to set a Router & RouterLink in the Angular2 Dart.

main.dart

import 'package:angular2/angular2.dart'; import 'package:angular2/router.dart';  import 'package:angular2/src/reflection/reflection.dart' show reflector; import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;   @Component(     selector: 'home' ) @View(     template: '<h1>I am Home</h1><a router-link="child">Go Child</a>',     directives: const [RouterOutlet, RouterLink] ) class Home {}  // // //  @Component(   selector: 'child' ) @View(     template: '<h1>I am Child</h1><a router-link="home">Go Home</a>',     directives: const [RouterOutlet, RouterLink] ) class Child {}  // // //  @Component(   selector: 'index' ) @View(   template: '''   <router-outlet></router-outlet>             ''',   directives: const [RouterOutlet, RouterLink] ) class Index {   Router router;    Index(Router this.router) {     router.config({ 'path': '/child', 'component': Child, 'alias': 'child'});     router.config({ 'path': '/', 'component': Home, 'alias': 'home'});   }  }  main() {   reflector.reflectionCapabilities = new ReflectionCapabilities();   bootstrap(Index, routerInjectables); } 

Here's my approach:

In router_link.dart I see newHref coming back as null

onAllChangesDone() {     if (isPresent(this._route) && isPresent(this._params)) {       var newHref = this._router.generate(this._route, this._params);       this._href = newHref;       // Keeping the link on the element to support contextual menu `copy link`        // and other in-browser affordances.       print('newHref');       print(newHref);       DOM.setAttribute(this._domEl, "href", newHref);     } 

This results in an error and kills the navigation request.

String expected STACKTRACE: 0 BlinkElement.setAttribute_Callback_2 (dart:_blink:7565)

1 BlinkElement.setAttribute_Callback_2_ (dart:_blink:7566)

2 Element.setAttribute (dart:html:13673)

3 BrowserDomAdapter.setAttribute(package:angular2/src/dom/browser_adapter.dart:258:25)

4 RouterLink.onAllChangesDone(package:angular2/src/router/router_link.dart:66:23)

Answer 1

As of Angular Dart 2.0.0 (release candidate), the correct syntax for a router link is:

<a [router-link]="['./Home']">Go Home</a> 

The value is a list of arguments that are passed to Router.navigate().

The correct syntax for configuring routes is:

@Component(     selector: 'my-app',     template: ...,     directives: const [ROUTER_DIRECTIVES],     providers: const [HeroService, ROUTER_PROVIDERS]) @RouteConfig(const [   const Route(       path: '/dashboard',       name: 'Dashboard',       component: DashboardComponent,       useAsDefault: true),   const Route(       path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent),   const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent) ]) class AppComponent {   String title = 'Tour of Heroes'; }