Angular2-如何使用具有动态URL的路由器

假设我有这个嵌套的itemListComponent，它是rootComponent的子级，使用以下模板：

<span *ngFor="#item of list">
    <a [routerLink]="[item.url]">{{item.title}}</a> |
</span>

如何实现@RouteConfig，使这些链接使用itemDetail组件

抱歉，如果这看起来不是很详细。我没有找到一个清晰的指南，指导如何路由由具有完整路径（而不是组合路径）的服务提供的URL。但是，如果您有预组装的URL，您可能不想对它们使用

routerLink

。RouterLink需要一个数组，您必须使用简单的URL

考虑一下您的原始代码片段

<span *ngFor="#item of list">
    <a [href]="item.url">{{item.title}}</a> |
</span>

这应该会产生这样的URL

#/category2/987654/hello-world

既然URL格式正确，我们就可以使用前面提到的正则表达式匹配器了

@RouteConfig([
{
名称：“ItemDetail”，
//与href中的URL或用户直接键入的URL匹配的正则表达式
正则表达式：“^（[a-z0-9]+）/（[0-9]+）/（[a-z\\-]+）$”，
//序列化程序是必需的，但当您有带参数的routerLink时，将使用它
序列化程序：（参数）=>{
返回新的GeneratedUrl（`${params.a}/${params.b}/${params.c}`）
},
组件：ItemDetail
}
])

如果您有预组装的URL，这是最简单的

请看一个正在工作的示例

请注意，正则表达式匹配器是在beta.9中引入的，它们包含一些问题，请参阅

你可以找到其他的

---

我真的为我糟糕的正则表达式技能道歉，也许你可以绕过它，但希望你能理解。

虽然Eric使用正则表达式的解决方案使用HashLocationStrategy效果很好，但我使用的解决方案基于此，由Yavo Fain提出

然后我转换为PathLocationStrategy（使用APP_BASE_HREF.See）

要使PathLocationStrategy起作用，我们需要将index.html作为服务器端的默认回退页面。下面是一个使用gulp Web服务器的示例：

gulp.task('webserver', function() { 
    gulp.src('app') .pipe(webserver({ 
        fallback: 'index.html' 
    })); 
});

我们需要将routerLink与PathLocationStrategy结合使用。否则，当路由到URL时，浏览器将刷新页面，并且它的行为不会完全像一个单页应用程序

然后，我可以使用*ngFor循环来渲染具有不同路径和ID的不同项目

<div *ngFor="#item of list">
    <a [routerLink]="['ContentId', {id:item.url}]">{{item.title}}</a>
</div>

{{item.title}

试试这个：

<span *ngFor="#item of list">
   <a [routerLink]="['/category', item.url]">
        {{item.title}}
   </a>
</span>

---

非常感谢埃里克，它成功了。然而，routerLink似乎需要使用PathLocationStrategy。现在不可能在angular 2中使用正则表达式。这就是问题的答案。可能是这个团队最近添加了这个。谢谢@Ivan Pianetti如果我们想在动态URL中添加两个以上的参数，比如

<div *ngFor="#item of list">
    <a [routerLink]="['ContentId', {id:item.url}]">{{item.title}}</a>
</div>

<span *ngFor="#item of list">
   <a [routerLink]="['/category', item.url]">
        {{item.title}}
   </a>
</span>

{path: "category/:id", component: CategoryComponent}