iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(router): add support for componentless routes

Browse Source
This commit is contained in:
vsavkin
2016-06-19 14:44:20 -07:00
parent bd2281e32d
commit 92d8bf9619
11 changed files with 380 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/@angular/router/src/apply_redirects.ts
+4 -4
View File
@@ -35,7 +35,7 @@ function createUrlTree(urlTree: UrlTree, root: UrlSegment): Observable<UrlTree>
}
function expandSegment(routes: Route[], segment: UrlSegment, outlet: string): UrlSegment {
if (segment.pathsWithParams.length === 0 && Object.keys(segment.children).length > 0) {
if (segment.pathsWithParams.length === 0 && segment.hasChildren()) {
return new UrlSegment([], expandSegmentChildren(routes, segment));
} else {
return expandPathsWithParams(segment, routes, segment.pathsWithParams, outlet, true);
@@ -119,7 +119,7 @@ function matchPathsWithParamsAgainstRoute(
return new UrlSegment(consumedPaths, {});
// TODO: check that the right segment is present
} else if (slicedPath.length === 0 && Object.keys(segment.children).length > 0) {
} else if (slicedPath.length === 0 && segment.hasChildren()) {
const children = expandSegmentChildren(childConfig, segment);
return new UrlSegment(consumedPaths, children);
@@ -136,7 +136,7 @@ function match(segment: UrlSegment, route: Route, paths: UrlPathWithParams[]): {
positionalParamSegments: {[k: string]: UrlPathWithParams}
} {
if (route.path === '') {
if (route.terminal && (Object.keys(segment.children).length > 0 || paths.length > 0)) {
if (route.terminal && (segment.hasChildren() || paths.length > 0)) {
throw new NoMatch();
} else {
return {consumedPaths: [], lastChild: 0, positionalParamSegments: {}};
@@ -165,7 +165,7 @@ function match(segment: UrlSegment, route: Route, paths: UrlPathWithParams[]): {
currentIndex++;
}
if (route.terminal && (Object.keys(segment.children).length > 0 || currentIndex < paths.length)) {
if (route.terminal && (segment.hasChildren() || currentIndex < paths.length)) {
throw new NoMatch();
}
modules/@angular/router/src/config.ts
+6 -1
View File
@@ -26,10 +26,15 @@ function validateNode(route: Route): void {
throw new Error(
`Invalid configuration of route '${route.path}': redirectTo and component cannot be used together`);
}
if (route.redirectTo === undefined && !route.component && !route.children) {
throw new Error(
`Invalid configuration of route '${route.path}': component, redirectTo, children must be provided`);
}
if (route.path === undefined) {
throw new Error(`Invalid route configuration: routes must have path specified`);
}
if (route.path.startsWith('/')) {
throw new Error(`Invalid route configuration of route '${route.path}': path cannot start with a slash`);
throw new Error(
`Invalid route configuration of route '${route.path}': path cannot start with a slash`);
}
}
modules/@angular/router/src/create_url_tree.ts
+2 -2
View File
@@ -139,7 +139,7 @@ function updateSegment(segment: UrlSegment, startIndex: number, commands: any[])
if (!segment) {
segment = new UrlSegment([], {});
}
if (segment.pathsWithParams.length === 0 && Object.keys(segment.children).length > 0) {
if (segment.pathsWithParams.length === 0 && segment.hasChildren()) {
return updateSegmentChildren(segment, startIndex, commands);
}
const m = prefixedWith(segment, startIndex, commands);
@@ -147,7 +147,7 @@ function updateSegment(segment: UrlSegment, startIndex: number, commands: any[])
if (m.match && slicedCommands.length === 0) {
return new UrlSegment(segment.pathsWithParams, {});
} else if (m.match && Object.keys(segment.children).length === 0) {
} else if (m.match && !segment.hasChildren()) {
return createNewSegment(segment, startIndex, commands);
} else if (m.match) {
return updateSegmentChildren(segment, 0, slicedCommands);
modules/@angular/router/src/recognize.ts
+30 -25
View File
@@ -5,7 +5,7 @@ import {of } from 'rxjs/observable/of';
import {Route, RouterConfig} from './config';
import {ActivatedRouteSnapshot, RouterStateSnapshot} from './router_state';
import {PRIMARY_OUTLET} from './shared';
import {PRIMARY_OUTLET, Params} from './shared';
import {UrlPathWithParams, UrlSegment, UrlTree, mapChildrenIntoArray} from './url_tree';
import {last, merge} from './utils/collection';
import {TreeNode} from './utils/tree';
@@ -18,7 +18,7 @@ export function recognize(
rootComponentType: Type, config: RouterConfig, urlTree: UrlTree,
url: string): Observable<RouterStateSnapshot> {
try {
const children = processSegment(config, urlTree.root, PRIMARY_OUTLET);
const children = processSegment(config, urlTree.root, {}, PRIMARY_OUTLET);
const root = new ActivatedRouteSnapshot(
[], {}, PRIMARY_OUTLET, rootComponentType, null, urlTree.root, -1);
const rootNode = new TreeNode<ActivatedRouteSnapshot>(root, children);
@@ -35,19 +35,20 @@ export function recognize(
}
}
function processSegment(
config: Route[], segment: UrlSegment, outlet: string): TreeNode<ActivatedRouteSnapshot>[] {
if (segment.pathsWithParams.length === 0 && Object.keys(segment.children).length > 0) {
return processSegmentChildren(config, segment);
function processSegment(config: Route[], segment: UrlSegment, extraParams: Params, outlet: string):
TreeNode<ActivatedRouteSnapshot>[] {
if (segment.pathsWithParams.length === 0 && segment.hasChildren()) {
return processSegmentChildren(config, segment, extraParams);
} else {
return [processPathsWithParams(config, segment, 0, segment.pathsWithParams, outlet)];
return [processPathsWithParams(
config, segment, 0, segment.pathsWithParams, extraParams, outlet)];
}
}
function processSegmentChildren(
config: Route[], segment: UrlSegment): TreeNode<ActivatedRouteSnapshot>[] {
config: Route[], segment: UrlSegment, extraParams: Params): TreeNode<ActivatedRouteSnapshot>[] {
const children = mapChildrenIntoArray(
segment, (child, childOutlet) => processSegment(config, child, childOutlet));
segment, (child, childOutlet) => processSegment(config, child, extraParams, childOutlet));
checkOutletNameUniqueness(children);
sortActivatedRouteSnapshots(children);
return children;
@@ -63,10 +64,10 @@ function sortActivatedRouteSnapshots(nodes: TreeNode<ActivatedRouteSnapshot>[]):
function processPathsWithParams(
config: Route[], segment: UrlSegment, pathIndex: number, paths: UrlPathWithParams[],
outlet: string): TreeNode<ActivatedRouteSnapshot> {
extraParams: Params, outlet: string): TreeNode<ActivatedRouteSnapshot> {
for (let r of config) {
try {
return processPathsWithParamsAgainstRoute(r, segment, pathIndex, paths, outlet);
return processPathsWithParamsAgainstRoute(r, segment, pathIndex, paths, extraParams, outlet);
} catch (e) {
if (!(e instanceof NoMatch)) throw e;
}
@@ -76,19 +77,20 @@ function processPathsWithParams(
function processPathsWithParamsAgainstRoute(
route: Route, segment: UrlSegment, pathIndex: number, paths: UrlPathWithParams[],
outlet: string): TreeNode<ActivatedRouteSnapshot> {
parentExtraParams: Params, outlet: string): TreeNode<ActivatedRouteSnapshot> {
if (route.redirectTo) throw new NoMatch();
if ((route.outlet ? route.outlet : PRIMARY_OUTLET) !== outlet) throw new NoMatch();
if (route.path === '**') {
const params = paths.length > 0 ? last(paths).parameters : {};
const snapshot =
new ActivatedRouteSnapshot(paths, params, outlet, route.component, route, segment, -1);
const snapshot = new ActivatedRouteSnapshot(
paths, merge(parentExtraParams, params), outlet, route.component, route, segment, -1);
return new TreeNode<ActivatedRouteSnapshot>(snapshot, []);
}
const {consumedPaths, parameters, lastChild} = match(segment, route, paths);
const {consumedPaths, parameters, extraParams, lastChild} =
match(segment, route, paths, parentExtraParams);
const snapshot = new ActivatedRouteSnapshot(
consumedPaths, parameters, outlet, route.component, route, segment,
pathIndex + lastChild - 1);
@@ -99,23 +101,24 @@ function processPathsWithParamsAgainstRoute(
return new TreeNode<ActivatedRouteSnapshot>(snapshot, []);
// TODO: check that the right segment is present
} else if (slicedPath.length === 0 && Object.keys(segment.children).length > 0) {
const children = processSegmentChildren(childConfig, segment);
} else if (slicedPath.length === 0 && segment.hasChildren()) {
const children = processSegmentChildren(childConfig, segment, extraParams);
return new TreeNode<ActivatedRouteSnapshot>(snapshot, children);
} else {
const child = processPathsWithParams(
childConfig, segment, pathIndex + lastChild, slicedPath, PRIMARY_OUTLET);
childConfig, segment, pathIndex + lastChild, slicedPath, extraParams, PRIMARY_OUTLET);
return new TreeNode<ActivatedRouteSnapshot>(snapshot, [child]);
}
}
function match(segment: UrlSegment, route: Route, paths: UrlPathWithParams[]) {
function match(
segment: UrlSegment, route: Route, paths: UrlPathWithParams[], parentExtraParams: Params) {
if (route.path === '') {
if (route.terminal && (Object.keys(segment.children).length > 0 || paths.length > 0)) {
if (route.terminal && (segment.hasChildren() || paths.length > 0)) {
throw new NoMatch();
} else {
return {consumedPaths: [], lastChild: 0, parameters: {}};
return {consumedPaths: [], lastChild: 0, parameters: {}, extraParams: {}};
}
}
@@ -141,12 +144,14 @@ function match(segment: UrlSegment, route: Route, paths: UrlPathWithParams[]) {
currentIndex++;
}
if (route.terminal && (Object.keys(segment.children).length > 0 || currentIndex < paths.length)) {
if (route.terminal && (segment.hasChildren() || currentIndex < paths.length)) {
throw new NoMatch();
}
const parameters = merge(posParameters, consumedPaths[consumedPaths.length - 1].parameters);
return {consumedPaths, lastChild: currentIndex, parameters};
const parameters = merge(
parentExtraParams, merge(posParameters, consumedPaths[consumedPaths.length - 1].parameters));
const extraParams = route.component ? {} : parameters;
return {consumedPaths, lastChild: currentIndex, parameters, extraParams};
}
function checkOutletNameUniqueness(nodes: TreeNode<ActivatedRouteSnapshot>[]): void {
modules/@angular/router/src/router.ts
+83 -19
View File
@@ -386,29 +386,59 @@ class GuardChecks {
const curr = currNode ? currNode.value : null;
const outlet = parentOutletMap ? parentOutletMap._outlets[futureNode.value.outlet] : null;
// reusing the node
if (curr && future._routeConfig === curr._routeConfig) {
if (!shallowEqual(future.params, curr.params)) {
this.checks.push(new CanDeactivate(outlet.component, curr), new CanActivate(future));
}
this.traverseChildRoutes(futureNode, currNode, outlet ? outlet.outletMap : null);
// If we have a component, we need to go through an outlet.
if (future.component) {
this.traverseChildRoutes(futureNode, currNode, outlet ? outlet.outletMap : null);
// if we have a componentless route, we recurse but keep the same outlet map.
} else {
this.traverseChildRoutes(futureNode, currNode, parentOutletMap);
}
} else {
this.deactivateOutletAndItChildren(curr, outlet);
if (curr) {
// if we had a normal route, we need to deactivate only that outlet.
if (curr.component) {
this.deactivateOutletAndItChildren(curr, outlet);
// if we had a componentless route, we need to deactivate everything!
} else {
this.deactivateOutletMap(parentOutletMap);
}
}
this.checks.push(new CanActivate(future));
this.traverseChildRoutes(futureNode, null, outlet ? outlet.outletMap : null);
// If we have a component, we need to go through an outlet.
if (future.component) {
this.traverseChildRoutes(futureNode, null, outlet ? outlet.outletMap : null);
// if we have a componentless route, we recurse but keep the same outlet map.
} else {
this.traverseChildRoutes(futureNode, null, parentOutletMap);
}
}
}
private deactivateOutletAndItChildren(route: ActivatedRouteSnapshot, outlet: RouterOutlet): void {
if (outlet && outlet.isActivated) {
forEach(outlet.outletMap._outlets, (v: RouterOutlet) => {
if (v.isActivated) {
this.deactivateOutletAndItChildren(v.activatedRoute.snapshot, v);
}
});
this.deactivateOutletMap(outlet.outletMap);
this.checks.push(new CanDeactivate(outlet.component, route));
}
}
private deactivateOutletMap(outletMap: RouterOutletMap): void {
forEach(outletMap._outlets, (v: RouterOutlet) => {
if (v.isActivated) {
this.deactivateOutletAndItChildren(v.activatedRoute.snapshot, v);
}
});
}
private runCanActivate(future: ActivatedRouteSnapshot): Observable<boolean> {
const canActivate = future._routeConfig ? future._routeConfig.canActivate : null;
if (!canActivate || canActivate.length === 0) return of (true);
@@ -431,6 +461,7 @@ class GuardChecks {
return Observable.from(canDeactivate)
.map(c => {
const guard = this.injector.get(c);
if (guard.canDeactivate) {
return wrapIntoObservable(guard.canDeactivate(component, curr, this.curr));
} else {
@@ -480,36 +511,69 @@ class ActivateRoutes {
const future = futureNode.value;
const curr = currNode ? currNode.value : null;
const outlet = getOutlet(parentOutletMap, futureNode.value);
// reusing the node
if (future === curr) {
// advance the route to push the parameters
advanceActivatedRoute(future);
this.activateChildRoutes(futureNode, currNode, outlet.outletMap);
// If we have a normal route, we need to go through an outlet.
if (future.component) {
const outlet = getOutlet(parentOutletMap, futureNode.value);
this.activateChildRoutes(futureNode, currNode, outlet.outletMap);
// if we have a componentless route, we recurse but keep the same outlet map.
} else {
this.activateChildRoutes(futureNode, currNode, parentOutletMap);
}
} else {
this.deactivateOutletAndItChildren(outlet);
const outletMap = new RouterOutletMap();
this.activateNewRoutes(outletMap, future, outlet);
this.activateChildRoutes(futureNode, null, outletMap);
if (curr) {
// if we had a normal route, we need to deactivate only that outlet.
if (curr.component) {
const outlet = getOutlet(parentOutletMap, futureNode.value);
this.deactivateOutletAndItChildren(outlet);
// if we had a componentless route, we need to deactivate everything!
} else {
this.deactivateOutletMap(parentOutletMap);
}
}
// if we have a normal route, we need to advance the route
// and place the component into the outlet. After that recurse.
if (future.component) {
advanceActivatedRoute(future);
const outlet = getOutlet(parentOutletMap, futureNode.value);
const outletMap = new RouterOutletMap();
this.placeComponentIntoOutlet(outletMap, future, outlet);
this.activateChildRoutes(futureNode, null, outletMap);
// if we have a componentless route, we recurse but keep the same outlet map.
} else {
advanceActivatedRoute(future);
this.activateChildRoutes(futureNode, null, parentOutletMap);
}
}
}
private activateNewRoutes(
private placeComponentIntoOutlet(
outletMap: RouterOutletMap, future: ActivatedRoute, outlet: RouterOutlet): void {
const resolved = ReflectiveInjector.resolve([
{provide: ActivatedRoute, useValue: future},
{provide: RouterOutletMap, useValue: outletMap}
]);
advanceActivatedRoute(future);
outlet.activate(future._futureSnapshot._resolvedComponentFactory, future, resolved, outletMap);
}
private deactivateOutletAndItChildren(outlet: RouterOutlet): void {
if (outlet && outlet.isActivated) {
forEach(
outlet.outletMap._outlets, (v: RouterOutlet) => this.deactivateOutletAndItChildren(v));
this.deactivateOutletMap(outlet.outletMap);
outlet.deactivate();
}
}
private deactivateOutletMap(outletMap: RouterOutletMap): void {
forEach(outletMap._outlets, (v: RouterOutlet) => this.deactivateOutletAndItChildren(v));
}
}
function pushQueryParamsAndFragment(state: RouterState): void {