基于可变段的角度路径子项答案

【问题标题】：angular route children based on variable segments基于可变段的角度路径子项
【发布时间】：2018-06-05 17:32:44
【问题描述】：

我有一个指向同一位置的 url 模式，但它以不同的数据结尾。

例子：

请记住，“detail”和“object”都是动态的，例如：detail1-category、detail2-category、detail3-category、object1、object2、objectt3。

URL1 = /url/detail-category

URL2 = /url/object

我需要根据 URL 是否以“-category”结尾来加载Children，我正在使用匹配器，但我丢失了“路径”变量，因为不能同时使用匹配器和路径。

原文：

{ path: 'url/:id',  
    loadChildren: './modules/child.module#ChildModule'
},

更新：

{ matcher: categoriesMatcher, 
    loadChildren: './modules/child.module#ChildModule'
},

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

// 以上部分取自这里，它可以工作，但是我们丢失了决定组件行为的数据。 Angular 2 different components with same route

【问题讨论】：

我不明白你所说的“路径”变量是什么意思。您是指原始示例中的参数:id 吗？这些参数分配给匹配结果的posParam。这是一个例子：gist.github.com/anein/fba647b4206695d109c30e1fc0d2e8ee
是的，我就是这个意思。通过查看“快照”，我非常接近。我正要尝试用 snapshot.paramMap 注入它......很高兴你打败了我！
您可以将您的评论设置为答案，以便我给予您信任吗？

标签： angular routes angular-routing

【解决方案1】：

匹配器可以提供参数作为匹配逻辑的一部分。返回值应包含带有每个路由参数值的posParam 属性。

例如：

export function MyAwesomeMatcher ( url: UrlSegment[] ): UrlMatchResult {
    if (url.length === 0) {
        return null;
    }
    const reg = /^(awesome-path)$/;
    const param = url[ 0 ].toString();
    if (param.match( reg )) {
       // myValue: "awesome-path"
       return ({ consumed: url, posParams: { myValue: url[ 0 ] } });
   }
   return null;
}

// define application routes.
const routes: Routes = [
   { path: '', component: HomeComponent, pathMatch: 'full' },
   { matcher: MyAwesomeMatcher, component: MyAwesomeComponent }
   ...
];

从这里复制的上述示例代码：

https://gist.github.com/anein/fba647b4206695d109c30e1fc0d2e8ee

【讨论】：