CODEWITHSUNDEEP
angulartypescript
davidArchA
davidArchA

Reputation: 67

In angular while using [routerLink] symbols in URL converted to text.“?” and “=” are converted to text

I am trying to navigate to component along with parameters by using HTML tag. But after navigation “?” and “=” are converted to text.

My Actual navigating URL: http://localhost:4200/list/contentpage?id=3838618

I can navigate above URL with href.

<a href="/list/contentpage?id={{ item.id }}">{{ item.title }}</a>

But I am unable to navigate using [routerLink].

When I try to use [routerLink] for navigation as below.

<a [routerLink]="'/list/contentpage?id='+ item.id">{{ item.title }}</a> 
 <a [routerLink]="['/list/contentpage?id=', item.id]">{{ item.title }}</a>

The symbols are getting encoded. Means “?” and “=” are converted to text.

http://localhost:4200/list/contentpage%3Fid%3D/3838618

I tried with router.navigate() also but no luck.

<a (click)="linksClick(item.id)">{{ item.title }}</a>

linksClick(id: number) {
    this.router.navigate(['/list/contentpage?id=', id]);
  }

After using [rouerLink] also I want to display URL as same as before.

http://localhost:4200/list/contentpage?id=3838618

Upvotes: 0

Views: 85

Answers (1)

Matthieu Riegler
Matthieu Riegler

Reputation: 55082

Yes, routerLink escapes strings.

If you want to pass question params, use the [queryParams] binding :

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

Upvotes: 2

Related Questions