routerLink link from a function

Question

My question is very similar to this but it's not working for me. I already asked the person who post it but I got no reply, so here I go. I basically want to generate links from a function:

generator(linkFor, linkPath){
    if (linkFor == 'msg'){
        // now linkPath is something like 2/4
        // and the route to read the message is message/view/2/4
        return 'message/view/' + linkPath
    }
}

and the if conditions do go on. From template I do:

<a href="javascript:void(0)" [routerLink]="generator(data.type, data.source)">{{data.source_name}}</a>

Now the link is being generated but adds ():

message/view/(2/4)

and thus, it can't be found. Where are the braces coming from?

@porgo in the above if condition for e.g., it will be "2/4". It is always a string and will depend on the type. Sometimes it will be "4", sometimes "hello" based on data.type of course as sent by the backend — Nie Selam, Apr 23 '19 at 10:30
do a `console.log` to check the actual value for linkPath before returning and post it. — Qortex, Apr 23 '19 at 10:30
@Mic i already did that actually and it gives : message/view/3/45 — Nie Selam, Apr 23 '19 at 10:33

score 1 · Answer 1 · answered Apr 23 '19 at 10:42

1

generator(linkFor, linkPath){
   if (linkFor == 'msg'){
      return ['message', 'view', linkPath]
   }
   return null;
}

answered Apr 23 '19 at 10:42

Remi Sture

12,000
5
22
35

thanks for helping out. Tried your way and also making linkPath an array so it gives in the end [message, view, 3,4] but still it adds (). Let me look at it the other way around – Nie Selam Apr 23 '19 at 10:55

mayur · Accepted Answer · 2019-04-23T11:59:28.303

There is performance issue with [routerLink] above logic. What are the drawbacks let me come first

Try this :

<a href="javascript:void(0)" [routerLink]="generator(data.type, data.source)">Test</a>

generator(linkFor, linkPath){
 console.log('Generate URL for me');
}

Note: Check now how many times the console is printed, Reason is this async call and called and slows the application performance

so here is another way we can generate links from a function

<a href="javascript:void(0)" (click)="generator(data.type, data.source)">Test</a>

import { Router } from '@angular/router';

constructor(private _router: Router)

generator(linkFor, linkPath){
console.log('Generate URL for me');
  if (linkFor == 'msg'){
    this._router.navigate(['message/view/' + linkPath])
  }
}

Note: Now check console log is printed only once which is a better performance way to implement generate links from a function.

In short [routerLink] async call hits the function infinity way even when the user action is not performed. The (click) will work only according to user actions.

thanks for opening my eyes. I did see my console printing 3-4 times and I wasn't sure why since my ngFor had only one record. Your explanation makes sense. But sadly, the links have to be generated on ngFor and i don't know which element will have to be (clicked) since the links are either via web sockets or on component initialization. But I do appreciate the explanation. — Nie Selam, Apr 23 '19 at 11:55

routerLink link from a function

2 Answers2