Question

在我的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”以显示在浏览器地址栏中。

任何帮助都将不胜感激。

Answer 1

您可以使用routerLink内的功能。因此，您可以在组件中使用函数：

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

并在routerLink：

中使用它

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

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

Answer 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>

格式化routerLink参数URL

2 个答案: