fix(router): respond to hashchange events

Previously if the URL changed in `HashLocation` mode, the router would not pick up the change. This adds a listener in `HashLocationStrategy` for `hashchange` events to fix the problem. Closes #5013
2015-10-30 08:48:47 -07:00
parent cb2b690471
commit 53bddec1d2
6 changed files with 95 additions and 0 deletions
--- a/modules/playground/src/hash_routing/index.html
+++ b/modules/playground/src/hash_routing/index.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<title>Routing Example</title>
+<base href="/playground/src/hash_routing/">
+<body>
+  <example-app>
+    Loading...
+  </example-app>
+
+  $SCRIPTS$
+</body>
+</html>
--- a/modules/playground/src/hash_routing/index.ts
+++ b/modules/playground/src/hash_routing/index.ts
@ -0,0 +1,49 @@
+import {Component, provide} from 'angular2/angular2';
+import {bootstrap} from 'angular2/bootstrap';
+import {
+  RouteConfig,
+  Route,
+  ROUTER_PROVIDERS,
+  ROUTER_DIRECTIVES,
+  HashLocationStrategy,
+  LocationStrategy
+} from 'angular2/router';
+
+import {reflector} from 'angular2/src/core/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/core/reflection/reflection_capabilities';
+
+@Component({selector: 'hello-cmp', template: `hello`})
+class HelloCmp {
+}
+
+
+@Component({selector: 'goodbye-cmp', template: `goodbye`})
+class GoodByeCmp {
+}
+
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <h1>My App</h1>
+    <nav>
+      <a href="#/" id="hello-link">Navigate via href</a> |
+      <a [router-link]="['/GoodbyeCmp']" id="goodbye-link">Navigate with Link DSL</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([
+  new Route({path: '/', component: HelloCmp, name: 'HelloCmp'}),
+  new Route({path: '/bye', component: GoodByeCmp, name: 'GoodbyeCmp'})
+])
+class AppCmp {
+}
+
+
+export function main() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  bootstrap(AppCmp,
+            [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);
+}