cargdev/angular
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

chore: router move-only

Browse Source
This commit is contained in:
Miško Hevery
2016-05-02 17:11:21 +00:00
committed by Igor Minar
parent 072446aed3
commit d930ad1816
116 changed files with 1345 additions and 1374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
modules/@angular/router/src/directives/router_link.ts
View File

@ -1,83 +1,62 @@
import {Directive} from '@angular/core';
import {Location} from '@angular/common';
import {isString} from '../../src/facade/lang';
import {Router} from '../router';
import {Instruction} from '../instruction';
import {
ResolvedReflectiveProvider,
Directive,
DynamicComponentLoader,
ViewContainerRef,
Attribute,
ComponentRef,
ComponentFactory,
ReflectiveInjector,
OnInit,
HostListener,
HostBinding,
Input,
OnDestroy,
Optional
} from '@angular/core';
import {RouterOutletMap, Router} from '../router';
import {RouteSegment, UrlSegment, Tree} from '../segments';
import {isString, isPresent} from '@angular/facade/src/lang';
import {ObservableWrapper} from '@angular/facade/src/async';
/**
* The RouterLink directive lets you link to specific parts of your app.
*
* Consider the following route configuration:
@Directive({selector: '[routerLink]'})
export class RouterLink implements OnDestroy {
@Input() target: string;
private _changes: any[] = [];
private _subscription: any;
* ```
* @RouteConfig([
* { path: '/user', component: UserCmp, as: 'User' }
* ]);
* class MyComp {}
* ```
*
* When linking to this `User` route, you can write:
*
* ```
* <a [routerLink]="['./User']">link to user component</a>
* ```
*
* RouterLink expects the value to be an array of route names, followed by the params
* for that level of routing. For instance `['/Team', {teamId: 1}, 'User', {userId: 2}]`
* means that we want to generate a link for the `Team` route with params `{teamId: 1}`,
* and with a child route `User` with params `{userId: 2}`.
*
* The first route name should be prepended with `/`, `./`, or `../`.
* If the route begins with `/`, the router will look up the route from the root of the app.
* If the route begins with `./`, the router will instead look in the current component's
* children for the route. And if the route begins with `../`, the router will look at the
* current component's parent.
*/
@Directive({
selector: '[routerLink]',
inputs: ['routeParams: routerLink', 'target: target'],
host: {
'(click)': 'onClick()',
'[attr.href]': 'visibleHref',
'[class.router-link-active]': 'isRouteActive'
}
})
export class RouterLink {
private _routeParams: any[];
@HostBinding() private href: string;
@HostBinding('class.router-link-active') private isActive: boolean = false;
// the url displayed on the anchor element.
visibleHref: string;
target: string;
// the instruction passed to the router to navigate
private _navigationInstruction: Instruction;
constructor(private _router: Router, private _location: Location) {
// we need to update the link whenever a route changes to account for aux routes
this._router.subscribe((_) => this._updateLink());
constructor(@Optional() private _routeSegment: RouteSegment, private _router: Router) {
this._subscription =
ObservableWrapper.subscribe(_router.changes, (_) => { this._updateTargetUrlAndHref(); });
}
// because auxiliary links take existing primary and auxiliary routes into account,
// we need to update the link whenever params or other routes change.
private _updateLink(): void {
this._navigationInstruction = this._router.generate(this._routeParams);
var navigationHref = this._navigationInstruction.toLinkUrl();
this.visibleHref = this._location.prepareExternalUrl(navigationHref);
}
get isRouteActive(): boolean { return this._router.isRouteActive(this._navigationInstruction); }
set routeParams(changes: any[]) {
this._routeParams = changes;
this._updateLink();
ngOnDestroy() { ObservableWrapper.dispose(this._subscription); }
@Input()
set routerLink(data: any[]) {
this._changes = data;
this._updateTargetUrlAndHref();
}
@HostListener("click")
onClick(): boolean {
// If no target, or if target is _self, prevent default browser behavior
if (!isString(this.target) || this.target == '_self') {
this._router.navigateByInstruction(this._navigationInstruction);
this._router.navigate(this._changes, this._routeSegment);
return false;
}
return true;
}
private _updateTargetUrlAndHref(): void {
let tree = this._router.createUrlTree(this._changes, this._routeSegment);
if (isPresent(tree)) {
this.href = this._router.serializeUrl(tree);
this.isActive = this._router.urlTree.contains(tree);
} else {
this.isActive = false;
}
}
}

186
modules/@angular/router/src/directives/router_outlet.ts
View File

@ -1,176 +1,42 @@
import {PromiseWrapper, EventEmitter} from '../../src/facade/async';
import {StringMapWrapper} from '../../src/facade/collection';
import {isBlank, isPresent} from '../../src/facade/lang';
import {
ResolvedReflectiveProvider,
Directive,
Attribute,
DynamicComponentLoader,
ComponentRef,
ViewContainerRef,
provide,
Attribute,
ComponentRef,
ComponentFactory,
ReflectiveInjector,
OnDestroy,
Output
OnInit
} from '@angular/core';
import * as routerMod from '../router';
import {ComponentInstruction, RouteParams, RouteData} from '../instruction';
import * as hookMod from '../lifecycle/lifecycle_annotations';
import {hasLifecycleHook} from '../lifecycle/route_lifecycle_reflector';
import {OnActivate, CanReuse, OnReuse, OnDeactivate, CanDeactivate} from '../interfaces';
import {RouterOutletMap} from '../router';
import {DEFAULT_OUTLET_NAME} from '../constants';
import {isPresent, isBlank} from '@angular/facade/src/lang';
let _resolveToTrue = PromiseWrapper.resolve(true);
/**
* A router outlet is a placeholder that Angular dynamically fills based on the application's route.
*
* ## Use
*
* ```
* <router-outlet></router-outlet>
* ```
*/
@Directive({selector: 'router-outlet'})
export class RouterOutlet implements OnDestroy {
name: string = null;
private _componentRef: Promise<ComponentRef<any>> = null;
private _currentInstruction: ComponentInstruction = null;
export class RouterOutlet {
private _loaded: ComponentRef<any>;
public outletMap: RouterOutletMap;
@Output('activate') public activateEvents = new EventEmitter<any>();
constructor(private _viewContainerRef: ViewContainerRef, private _loader: DynamicComponentLoader,
private _parentRouter: routerMod.Router, @Attribute('name') nameAttr: string) {
if (isPresent(nameAttr)) {
this.name = nameAttr;
this._parentRouter.registerAuxOutlet(this);
} else {
this._parentRouter.registerPrimaryOutlet(this);
}
constructor(parentOutletMap: RouterOutletMap, private _location: ViewContainerRef,
@Attribute('name') name: string) {
parentOutletMap.registerOutlet(isBlank(name) ? DEFAULT_OUTLET_NAME : name, this);
}
/**
* Called by the Router to instantiate a new component during the commit phase of a navigation.
* This method in turn is responsible for calling the `routerOnActivate` hook of its child.
*/
activate(nextInstruction: ComponentInstruction): Promise<any> {
var previousInstruction = this._currentInstruction;
this._currentInstruction = nextInstruction;
var componentType = nextInstruction.componentType;
var childRouter = this._parentRouter.childRouter(componentType);
var providers = ReflectiveInjector.resolve([
provide(RouteData, {useValue: nextInstruction.routeData}),
provide(RouteParams, {useValue: new RouteParams(nextInstruction.params)}),
provide(routerMod.Router, {useValue: childRouter})
]);
this._componentRef =
this._loader.loadNextToLocation(componentType, this._viewContainerRef, providers);
return this._componentRef.then((componentRef) => {
this.activateEvents.emit(componentRef.instance);
if (hasLifecycleHook(hookMod.routerOnActivate, componentType)) {
return this._componentRef.then(
(ref: ComponentRef<any>) =>
(<OnActivate>ref.instance).routerOnActivate(nextInstruction, previousInstruction));
} else {
return componentRef;
}
});
unload(): void {
this._loaded.destroy();
this._loaded = null;
}
/**
* Called by the {@link Router} during the commit phase of a navigation when an outlet
* reuses a component between different routes.
* This method in turn is responsible for calling the `routerOnReuse` hook of its child.
*/
reuse(nextInstruction: ComponentInstruction): Promise<any> {
var previousInstruction = this._currentInstruction;
this._currentInstruction = nextInstruction;
get loadedComponent(): Object { return isPresent(this._loaded) ? this._loaded.instance : null; }
// it's possible the component is removed before it can be reactivated (if nested withing
// another dynamically loaded component, for instance). In that case, we simply activate
// a new one.
if (isBlank(this._componentRef)) {
return this.activate(nextInstruction);
} else {
return PromiseWrapper.resolve(
hasLifecycleHook(hookMod.routerOnReuse, this._currentInstruction.componentType) ?
this._componentRef.then(
(ref: ComponentRef<any>) =>
(<OnReuse>ref.instance).routerOnReuse(nextInstruction, previousInstruction)) :
true);
}
get isLoaded(): boolean { return isPresent(this._loaded); }
load(factory: ComponentFactory<any>, providers: ResolvedReflectiveProvider[],
outletMap: RouterOutletMap): ComponentRef<any> {
this.outletMap = outletMap;
let inj = ReflectiveInjector.fromResolvedProviders(providers, this._location.parentInjector);
this._loaded = this._location.createComponent(factory, this._location.length, inj, []);
return this._loaded;
}
/**
* Called by the {@link Router} when an outlet disposes of a component's contents.
* This method in turn is responsible for calling the `routerOnDeactivate` hook of its child.
*/
deactivate(nextInstruction: ComponentInstruction): Promise<any> {
var next = _resolveToTrue;
if (isPresent(this._componentRef) && isPresent(this._currentInstruction) &&
hasLifecycleHook(hookMod.routerOnDeactivate, this._currentInstruction.componentType)) {
next = this._componentRef.then(
(ref: ComponentRef<any>) =>
(<OnDeactivate>ref.instance)
.routerOnDeactivate(nextInstruction, this._currentInstruction));
}
return next.then((_) => {
if (isPresent(this._componentRef)) {
var onDispose = this._componentRef.then((ref: ComponentRef<any>) => ref.destroy());
this._componentRef = null;
return onDispose;
}
});
}
/**
* Called by the {@link Router} during recognition phase of a navigation.
*
* If this resolves to `false`, the given navigation is cancelled.
*
* This method delegates to the child component's `routerCanDeactivate` hook if it exists,
* and otherwise resolves to true.
*/
routerCanDeactivate(nextInstruction: ComponentInstruction): Promise<boolean> {
if (isBlank(this._currentInstruction)) {
return _resolveToTrue;
}
if (hasLifecycleHook(hookMod.routerCanDeactivate, this._currentInstruction.componentType)) {
return this._componentRef.then(
(ref: ComponentRef<any>) =>
(<CanDeactivate>ref.instance)
.routerCanDeactivate(nextInstruction, this._currentInstruction));
} else {
return _resolveToTrue;
}
}
/**
* Called by the {@link Router} during recognition phase of a navigation.
*
* If the new child component has a different Type than the existing child component,
* this will resolve to `false`. You can't reuse an old component when the new component
* is of a different Type.
*
* Otherwise, this method delegates to the child component's `routerCanReuse` hook if it exists,
* or resolves to true if the hook is not present.
*/
routerCanReuse(nextInstruction: ComponentInstruction): Promise<boolean> {
var result;
if (isBlank(this._currentInstruction) ||
this._currentInstruction.componentType != nextInstruction.componentType) {
result = false;
} else if (hasLifecycleHook(hookMod.routerCanReuse, this._currentInstruction.componentType)) {
result = this._componentRef.then(
(ref: ComponentRef<any>) =>
(<CanReuse>ref.instance).routerCanReuse(nextInstruction, this._currentInstruction));
} else {
result = nextInstruction == this._currentInstruction ||
(isPresent(nextInstruction.params) && isPresent(this._currentInstruction.params) &&
StringMapWrapper.equals(nextInstruction.params, this._currentInstruction.params));
}
return <Promise<boolean>>PromiseWrapper.resolve(result);
}
ngOnDestroy(): void { this._parentRouter.unregisterPrimaryOutlet(this); }
}