为什么 SAP 电商云 Spartacus UI RouterM

RouterModule.forChild 传入的 path 为 null：

注意，RouterModule.forRoot 只能调用一次。RouterModule 有一个 forChild 方法，也可以传入 Route 对象数组，然而尽管 forChild 和 forRoot 方法都包含路由指令和配置，但是 forRoot 可以返回 Router 对象，由于 Router 服务会改变 浏览器 location 对象，而 location 对象又是一个全局单例对象，所以 Router 服务对象也必须全局单例。

必须在根模块中只使用一次 forRoot 方法，feature Module中应当使用 forChild 方法。

当匹配到路由路径时，路由状态 component 属性定义的组件会被渲染在 router-outlet 指令 挂载的地方，即渲染激活组件的动态元素。被渲染的组件会作为 router-outlet 元素的兄弟节点而不是子节点，router-outlet 元素也可以层层嵌套，形成父子路由关系。

回到本文图1，path 为 null，看到 Route 里的定义：path 不能和 custom matcher 混用。

但是标准的 router 定义里，matcher 后面不是复数形式：

在 routes-config.ts 里看到的 matchers 定义：

类型是 UrlMatcher 的数组，而 UrlMatcher 是 Angular 标准类型：

https://angular.io/api/router/Route#path

这个函数的定义：

type UrlMatcher = (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) => UrlMatchResult | null;

接受下列三个参数：

• segment : URL 段的数组。
• group : 一个段组。
• route ：要匹配的路由。

返回类型为 UrlMatchResult.

看一个例子：

export function htmlFiles(url: UrlSegment[]) {
  return url.length === 1 && url[0].path.endsWith('.html') ? ({consumed: url}) : null;
}

export const routes = [{ matcher: htmlFiles, component: AnyComponent }];

这几个文件都相关：

所以 SAP Spartacus 必定有一个实现，把多个 matchers 合并为一个单一的 matcher，只有后者才能被 Angular 路由框架正确识别。

做个测试：

最后的效果：

还是能看到 header 和 footer 区域。

还是位于 main 区域：

因为 router-outlet 的父节点还是位于 storefront.component.html 之内：

更多Jerry的原创文章，尽在："汪子熙":