javascript - 格式化 routerLink 参数 url

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>