Формат URL-адреса параметра routerLink

В моем приложении 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», чтобы показать его в адресной строке браузера.

Любая помощь будет оценена по достоинству.


javascript angular routerlink angular2-routing
person Sumit Chaudhari    schedule 22.03.2017    source источник
comment
Попробуйте заменить пробелы тире. Например: [routerLink]="['demo', demo.name.replace(/\s+/g, '-')]"   -  person Titus    schedule 22.03.2017
comment
@ЯрославК. У меня маршрутизация определена отдельно в каждом модуле.   -  person Sumit Chaudhari    schedule 22.03.2017
comment
@Titus Я попробовал ваше решение, это дает мне ошибку Ошибки синтаксического анализа шаблона: Ошибка синтаксического анализатора: Неожиданный токен / в столбце 35 дюймов.   -  person Sumit Chaudhari    schedule 22.03.2017

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете использовать функции внутри routerLink. Таким образом, вы можете использовать функцию в своем компоненте:

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

И используйте его в своем routerLink:

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

Это обеспечивает гораздо больше возможностей повторного использования, чем изменение переменных непосредственно внутри файла routerLink.

person Tyler Jennings    schedule 22.03.2017

arrow_upward
1
arrow_downward

Создайте канал, который преобразует пробелы в дефисы.

@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>
person Martin    schedule 22.03.2017