参考"link.path".使用[routerLink]重定向到root时 [英] Refer to "link.path" while redirecting to root using [routerLink]
问题描述
我有一个使用打字稿文件来设置链接的应用程序,并且在模板中,我使用ngFor
通过链接进行插值并构建导航栏.在那些链接对象中,有一个名为link.path
的属性,其中包含要重定向到的路径.我使用[routerLink]
重定向到所需的路径,它可以正常工作,但是我不在根URL上.我需要实现此功能,它将子路由附加到应用程序的根目录.但是,将我的实现更改为:
I have an application that uses a typescript file for setting up links and within the template I use ngFor
to interpolate through the links and build a navigation bar. Within those link objects there is a property called link.path
containing the path to be redirected to. I use [routerLink]
to redirect to the path required, which works fine, but I was not at the root url. I need to achieve this functionality, which appends the child route to the root of the application. However, after changing my implementation to:
[routerLink]= '["/link.path"]'
单击后,我将重定向到<URL>/link.path
而不是<URL>/<name under link.path>
,这自然会给我一个未发现的错误.
On click I am redirected to <URL>/link.path
rather than <URL>/<name under link.path>
which naturally gives me a not found error.
如何更改上面的表达式以显示此参数内的实际值,而不是给我link.path
作为字符串?
how do i change my expression above to show the actual value inside this parameter rather than giving me link.path
as a string?
component.ts
// imports, declarations of classes and other stuff.
* @property {array} links
*/
links: Array<{ text: string, path: string }>;
/**
* constructor for toolbar component is responsible for initializing translatePipe, dynamic routing and router,
* as well as adding routes dynamically to the router and the 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 });
});
//rest of the 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>
推荐答案
在Angular中,您可以针对任何路径撰写URL; [routerLink]
提供了提供字符串标记或变量以构成最终路径的工具
In Angular you can compose URL with respect of any path; [routerLink]
provide the facility to provide string token or variables to make final path
[routerLink]="['/', var, 'str']"
=/var/str
<a class="nav-link" [routerLink]='["/", link.path]'>{{ link.text }}</a>
RouterLink的官方角度参考: https://angular.io/api/router/RouterLink
Angular official reference for RouterLink : https://angular.io/api/router/RouterLink
这篇关于参考"link.path".使用[routerLink]重定向到root时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!