Question

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

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

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

/ category1 /（内容id）/（用短划线（ - ）连接的标题）
/ category2 /（内容id）/（与短划线（ - ）相关联的标题）
/ category3 /（内容ID）/（与短划线（ - ）相关联的标题）

示例：

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

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

很抱歉，如果这看起来不太详细。我没有找到一个明确的如何指导由具有完整路径的服务（未组装的路径）提供的路由URL

Answer 1

试试这个：

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

routes.ts：

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

Answer 2

这就是regex matches的用途。但是，如果您有预先组合的网址，则可能不希望将routerLink与其一起使用。 RouterLink需要一个数组，你必须使用简单的URL。

考虑原始代码段

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

假设您使用HashLocationStrategy，您的网址应包含哈希

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

这应该会产生这样的网址

#/category2/987654/hello-world

现在我们已经正确形成了URL，我们可以使用前面提到的正则表达式匹配器

@RouteConfig([
  {
    name : 'ItemDetail',

    // regex that will match the URL in the href or the URL typed directly by the user
    regex : '^([a-z0-9]+)/([0-9]+)/([a-z\\-]+)$',

    // serializer is mandatory, but it is used when you have a routerLink with params
    serializer : (params) => {
      return new GeneratedUrl(`${params.a}/${params.b}/${params.c}`)
    },
    component : ItemDetail
  }
])

如果您预先安装了网址，这是最简单的。

请参阅此plnkr并举例说明。

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

你可能会找到其他的。

我真的为我糟糕的正则表达式技巧道歉，可能你可以绕过它，但希望你能得到这个想法。

Answer 3

尽管Eric使用正则表达式的解决方案使用HashLocationStrategy可以正常工作，但我使用的解决方案基于Yavo Fain的article和Plunk。

然后我转换为PathLocationStrategy（使用APP_BASE_HREF。请参阅official doc）

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

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

我们需要将routerLink与PathLocationStrategy一起使用。否则，浏览器会在路由到网址时刷新页面，并且它不会像单页应用程序那样完全表现。

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

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

Angular2 - 如何使用带动态网址的路由器

3 个答案: