import {Directive, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations'; import {ElementRef} from 'angular2/core'; import {StringMap, StringMapWrapper} from 'angular2/src/facade/collection'; import {isPresent} from 'angular2/src/facade/lang'; import {DOM} from 'angular2/src/dom/dom_adapter'; import {Router} from './router'; import {Location} from './location'; /** * The RouterLink directive lets you link to specific parts of your app. * * * Consider the following route configuration: * ``` * @RouteConfig({ * path: '/user', component: UserCmp, alias: 'user' * }); * class MyComp {} * ``` * * When linking to a route, you can write: * * ``` * link to user component * ``` * * @exportedAs angular2/router */ @Directive({ selector: '[router-link]', properties: [ 'route: routerLink', 'params: routerParams' ], lifecycle: [onAllChangesDone] }) export class RouterLink { _domEl; _route:string; _params:StringMap; _router:Router; _location:Location; // the url displayed on the anchor element. _visibleHref: string; // the url passed to the router navigation. _navigationHref: string; constructor(elementRef:ElementRef, router:Router, location:Location) { this._domEl = elementRef.domElement; this._router = router; this._location = location; this._params = StringMapWrapper.create(); DOM.on(this._domEl, 'click', (evt) => { DOM.preventDefault(evt); this._router.navigate(this._navigationHref); }); } set route(changes: string) { this._route = changes; } set params(changes: StringMap) { this._params = changes; } onAllChangesDone(): void { if (isPresent(this._route) && isPresent(this._params)) { this._navigationHref = this._router.generate(this._route, this._params); this._visibleHref = this._location.normalizeAbsolutely(this._navigationHref); // Keeping the link on the element to support contextual menu `copy link` // and other in-browser affordances. DOM.setAttribute(this._domEl, 'href', this._visibleHref); } } }