Angular2-如何将路由器与动态网址一起使用 [英] Angular2 - How to use router with dynamic urls

问题描述

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

Suppose I have this nested itemListComponent, which is a child of a rootComponent, using the following template:

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

Json服务提供的路径item.url可以具有以下路径结构之一:

The path item.url, which is provided from a Json service, could have one of the following path structure:

• /category1/(内容ID)/(与破折号(-)关联的标题)
• /category2/(内容ID)/(与破折号(-)关联的标题)
• /category3/(内容ID)/(与破折号(-)相连的标题)

示例:

category2/987654/hello-world
category2/123456/hi-teacher
category3/554433/yo-brother

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

How could @RouteConfig be implemented so that these links use a itemDetail component?

很抱歉，如果它看起来不太详细.我找不到用于路由由具有完整路径(而非组合路径)的服务提供的URL的清晰指南.

Sorry if this does not look very detailed. I did not find a clear how-to-guide for routing urls that are provided by a service with full paths (not assembled paths)

推荐答案

尝试一下:

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

routes.ts:

routes.ts:

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

这篇关于Angular2-如何将路由器与动态网址一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！