How to use a fully variable URL in routerLink param

Question

Let, I have an URL like below (I am actually getting it by get method)-

/glaccounts/pending_tasks?taskId=2&taskCommand="CreateGeneralLedgerAccount"

this URL resides on an object like this- {activity:"work", taskUI="/glaccounts/pending_tasks?taskId=2&taskCommand="CreateGeneralLedgerAccount"}

Now, how to use that in routerLink? The code below is not working-

<ul class="weekly-weather">
    <li *ngFor="let task of pendingTasks">
       <a [routerLink]="task.taskUI" [queryParams]="{taskId: '2', taskCommand: 'CreateGeneralLedgerAccount'}">
           {{task.activity}}
       </a>
       <i class="material-icons">call_missed_outgoing</i>
    </li>
</ul>

(Note: Here, I am getting an array of objects in pendingTasks)

I have also tried

[routerLink]=[task.taskUI]
[routerLink]=[{{task.taskUI}}]
[routerLink]="{{task.taskUI}}"
[routerLink]={{task.taskUI}}

Last three throw errors obviously. :P

Object should be like this `{activity:"work", taskUI:"/glaccounts/pending_tasks"}` . — ranjeet8082, Apr 25 '18 at 06:50
It's actually like that :P. It is coming from the service. Edited that — Shofol, Apr 25 '18 at 06:51
this should work `[routerLink]="task.taskUI"`, what's the error you get ? — Pardeep Jain, Apr 25 '18 at 06:51

score 1 · Answer 1 · answered Apr 25 '18 at 06:53

1

routerLink accepts an array of strings or strings.

Make a function that creates an array of strings, then use it

toLink(url: string)  {
  const arr = url.split('/');
  if (arr[arr.length - 1] === '') { arr.pop(); } // remove the last empty item
  if (arr[0] === '') { arr.shift(); } // remove the first empty item
  return arr;
}



<a [routerLink]="toLink(task.taskUI)">

Also remember, this will work if you want to go down in the URL tree. This means that this route must be a child of the route you're on.

answered Apr 25 '18 at 06:53

Additionally, you'll want to split and parametrize those query parameters. – Zlatko Apr 25 '18 at 07:12
What's the point of splitting the params if the function handles that already ? And I think he already did the routes, but in the case that he didn't, I imagine it won't take long to notice it. – Apr 25 '18 at 07:13
I'm talking about query params. Note his example url: `/glaccounts/pending_tasks?taskId=2&taskCommand="CreateGeneralLedgerAccount"`. – Zlatko Apr 25 '18 at 07:45
Oh my bad, I didn't had this URL when I commented ! – Apr 25 '18 at 07:48

How to use a fully variable URL in routerLink param

1 Answers1