格式化 routerLink 参数 url答案

【问题标题】：Format routerLink param url格式化 routerLink 参数 url
【发布时间】：2017-03-22 17:21:17
【问题描述】：

在我的 Angular 2 应用程序中，我定义了一个路由器链接，例如：

<a *ngFor="let demo of demos" [routerLink]="['demo', demo.name]">example</a>

目前我将 demo.name 设为“example.net/demo/A%20%demo%20%test”。我想将其格式化为“example.net/demo/a-demo-test”以显示在浏览器地址栏中。

任何帮助将不胜感激。

【问题讨论】：

尝试用破折号替换空格。例如：[routerLink]="['demo', demo.name.replace(/\s+/g, '-')]"
@JaroslawK。我在每个模块中分别定义了路由。
@Titus 我尝试了你的解决方案，这给了我错误“模板解析错误：解析器错误：意外的令牌/在第 35 列”。

标签： javascript angular angular2-routing routerlink

【解决方案1】：

您可以在routerLink 中使用函数。所以你可以在你的组件中使用一个函数：

  hyphenateUrlParams(str:string){
    return str.replace(' ', '-');
  }

并在您的routerLink 中使用它：

[routerLink]="['/demo', hyphenateUrlParams(demo.name)]"

这比直接在routerLink 中改变变量提供了更多的可重用性。

【讨论】：

【解决方案2】：

创建一个将空格转换为连字符的管道。

@Pipe({
  name: 'kebabCase'
})
export class KebabCasePipe implements PipeTransform {

  transform(value: string): string {
      return value.replace(' ', '-');
  }

}

在链接中使用管道：

<a *ngFor="let demo of demos" [routerLink]="['demo', demo.name | kebabCase]">example</a>

【讨论】：