格式化 routerLink 参数 url

Question

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

<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

Format routerLink param url

javascript

angular2-routing

routerlink

angular