closes https://github.com/angular/angular/issues/4943 BREAKING CHANGE: `Location` and other related providers have been moved out of `router` and into `platform/common`. `BrowserPlatformLocation` is not meant to be used directly however advanced configurations may use it via the following import change. Before: ``` import { PlatformLocation, Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy, APP_BASE_HREF} from 'angular2/router'; import {BrowserPlatformLocation} from 'angular2/src/router/location/browser_platform_location'; ``` After: ``` import { PlatformLocation, Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy, APP_BASE_HREF} from 'angular2/platform/common'; import {BrowserPlatformLocation} from 'angular2/src/platform/browser/location/browser_platform_location'; ``` Closes #7962
		
			
				
	
	
		
			59 lines
		
	
	
		
			1.4 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			59 lines
		
	
	
		
			1.4 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| import {Component, provide} from 'angular2/core';
 | |
| import {bootstrap} from 'angular2/platform/browser';
 | |
| import {
 | |
|   CanActivate,
 | |
|   RouteConfig,
 | |
|   ComponentInstruction,
 | |
|   ROUTER_DIRECTIVES,
 | |
|   CanReuse,
 | |
|   RouteParams,
 | |
|   OnReuse
 | |
| } from 'angular2/router';
 | |
| import {APP_BASE_HREF} from 'angular2/platform/common';
 | |
| 
 | |
| 
 | |
| // #docregion reuseCmp
 | |
| @Component({
 | |
|   selector: 'my-cmp',
 | |
|   template: `
 | |
|     <div>hello {{name}}!</div>
 | |
|     <div>message: <input id="message"></div>
 | |
|   `
 | |
| })
 | |
| class MyCmp implements CanReuse,
 | |
|     OnReuse {
 | |
|   name: string;
 | |
|   constructor(params: RouteParams) { this.name = params.get('name') || 'NOBODY'; }
 | |
| 
 | |
|   routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }
 | |
| 
 | |
|   routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
 | |
|     this.name = next.params['name'];
 | |
|   }
 | |
| }
 | |
| // #enddocregion
 | |
| 
 | |
| 
 | |
| @Component({
 | |
|   selector: 'example-app',
 | |
|   template: `
 | |
|     <h1>Say hi to...</h1>
 | |
|     <a [routerLink]="['/HomeCmp', {name: 'naomi'}]" id="naomi-link">Naomi</a> |
 | |
|     <a [routerLink]="['/HomeCmp', {name: 'brad'}]" id="brad-link">Brad</a>
 | |
|     <router-outlet></router-outlet>
 | |
|   `,
 | |
|   directives: [ROUTER_DIRECTIVES]
 | |
| })
 | |
| @RouteConfig([
 | |
|   {path: '/', component: MyCmp, name: 'HomeCmp'},
 | |
|   {path: '/:name', component: MyCmp, name: 'HomeCmp'}
 | |
| ])
 | |
| class AppCmp {
 | |
| }
 | |
| 
 | |
| 
 | |
| export function main() {
 | |
|   return bootstrap(AppCmp,
 | |
|                    [provide(APP_BASE_HREF, {useValue: '/angular2/examples/router/ts/reuse'})]);
 | |
| }
 |