In my application, I utilize a typescript file to set up links and use ngFor within the template to iterate through these links and construct a navigation bar. Each link object contains a property called link.path which specifies the path to redirect to. To redirect to the required path, I use [routerLink], but encountered an issue when not at the root URL. I aim to achieve functionality similar to what is discussed in this thread, where the child route is appended to the root of the application.
However, after modifying my implementation to:
[routerLink]= '["/link.path"]'
Upon clicking, I am directed to <URL>/link.path instead of
<URL>/<name under link.path>How can I adjust my expression above to display the actual value inside this parameter rather than treating it as a string?
component.ts
// imports, class declarations, etc...
* @property {array} links
*/
links: Array<{ text: string, path: string }>;
/**
* The constructor for the toolbar component initializes TranslatePipe, dynamic routing, router,
* and dynamically adds routes to the router and dynamicRouting service.
* @param translate
* @param router
* @param dynamicRouting
*
*/
constructor(private translate: TranslatePipe, private router: Router, private dynamicRouting: DynamicRoutingService) {
this.router.config.unshift(
{ path: 'knowledge-base', component: DummyComponent },
{ path: 'home', component: DummyComponent },
{ path: 'settings', component: DummyComponent }
);
this.dynamicRouting.addItem({ text: "home", path: "home" });
this.dynamicRouting.addItem({ text: "knowledge_base", path: "knowledge-base" });
this.dynamicRouting.addItem({ text: "settings", path: "settings" });
}
/**
* Upon initialization, this function fetches the links and inserts the translated
* text and path to be used by the template
*
* @param
* @return
*/
ngOnInit() {
this.links = [];
let rawData = this.dynamicRouting.getLinks();
let self = this;
rawData.forEach(function(data) {
let text = self.translate.transform("generic[toolbar][categories][" + data.text + "][label]");
self.links.push({ text: text, path: data.path });
});
// Additional methods...
html
<app-header
[fixed]="true"
[navbarBrandFull]="{src: 'assets/logo.png', width: 143, height: 36, alt: 'RT Logo'}"
[navbarBrandMinimized]="{src: 'assets/logo2.png', width: 35, height: 35, alt: 'RT Logo'}"
[sidebarToggler]="'lg'">
<ul class="nav navbar-nav d-md-down-none" routerLinkActive="active">
<li class="nav-item px-3" *ngFor="let link of links">
<a class="nav-link" [routerLink]='["/link.path"]'>{{ link.text }}</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
</ul>
</app-header>