Как отключить динамически генерируемую кодировку URL на `[routerLink]` в Angular 8? - PullRequest
Новая
       2

Как отключить динамически генерируемую кодировку URL на `[routerLink]` в Angular 8?

0 голосов
/ 23 марта 2020

У меня есть [routerLink], как показано ниже; 

 <li *ngFor="let item of pageNumbers" class="page-item">
      <a
        class="page-link"
        [routerLink]="getPageUrl(item) | async"
        routerLinkActive="active"
        >{{ item }}</a
      >
    </li>

И getPageUrl метод похож; 

public getPageUrl(pageNumber: number): Observable<string> {
    const url: Observable<string> = this.route.url.pipe(
      map((segments: UrlSegment[]) => {
        let segmentsString = segments.join("/");
        let pageUrl = `/${segmentsString}?startIndex=${pageNumber}`;
        return pageUrl;
      })
    );
    return url;
  }

Но в браузере angular показывает URL, как показано ниже; 

http://localhost:3005/documents%3FstartIndex%3D1

желаемый: 

http://localhost:3005/documents?startIndex=1

Я что-то здесь упускаю? Я бы просто привязал нумерацию страниц непосредственно к [routerLink], но в URL будет добавлено больше параметров строки запроса (фильтры, сортировка), поэтому я пытаюсь динамически генерировать URL.

1 Ответ

1 голос
/ 23 марта 2020

Проверьте документы для RouterLink :

  • [routerLink] используется для передачи того, что предшествует ?, называемого "params".
  • [queryParams] используется для передачи того, что следует после ?, называемого «параметрами запроса».

Таким образом, для решения вашей проблемы возможное решение - вместо этого вернуть объект из getPageUrl строки, у объекта будут и параметры, и параметры запроса: 

public getPageUrl(pageNumber: number): Observable<string> {
    return this.route.url.pipe(
      map((segments: UrlSegment[]) => {
        return {params: segments, queryParams: {startIndex: pageNumber};
      })
    );
  }

, и вы будете использовать его следующим образом: 

<a *ngIf="getPageUrl(item) | async as url"
   class="page-link"
   [routerLink]="url.params"
   [queryParams]="url.queryParams">{{ item }}</a

Обратите внимание, что вам не нужно присоединяться к запросу сегменты с /, потому что routerLink также принимает массив.

...