How to append prefix to Angular RouterLink

Question

At the moment in my app, when navigate I'm doing like this:

<a routerLink="/app/home">Home</a>
<a routerLink="/app/about">About</a>
<a routerLink="/app/history">History</a>
<a routerLink="/app/team">Team</a>
...

As you can see, I'm repeating /app over and over, and this happens the same way in other feature modules

So I'm looking for a way to add prefix for router links under each feature module in Angular

// inside App Feature, the below links should have /app as prefix

<a routerLink="/home">Home</a>  // -->> navigate to /app/home
<a routerLink="/about">About</a> // -->> navigate to /app/about

I want to have different prefixes for different feature modules so using APP_BASE_HREF doesn't help here since it'll add a prefix globally for all.

Does anyone know about this? Please help.

Thank you

score 0 · Answer 1 · answered Jul 30 '22 at 17:37

why cant you pass the data to routerLink from the class

for example

<a *ngfor = 'let item of appRoutes'[routerLink]='item.routerLink'>{{item.routerName}}</a>

In the class Inject a custom service gives you data

class SomeName {
    appRoutes = [];
    constructor(service: SomeService){}
    ngOnInit() {
      this.appRoutes = this.service.getAppRoutes();
    }
}

In the Service define the routes array and iterate over the array and add the string /app and return those array from the methos getAppRoutes()

How to append prefix to Angular RouterLink

1 Answers1