Angular 2：使用函数生成路由链接/动态生成routerLink

Question

我想动态创建一个路由链接。

我已经在页面中加载了html，但是我需要在URL中使用一个ID，该ID可以在以后使用。

HTML：

<a href="javascript:void(0)" routerLink="cartoonBoxUrl()" routerLinkActive="active">Add Content to Cartoon Box</a>

此routelink中的链接包含卡通框的ID（/ carton-box / 1）。页面加载后，此ID可用。因此，我需要一种方法来创建路由链接以包含此ID。

所以我相信我们可以做类似的事情：routerLink="'cartoon-box/' + id"但我希望将routerlink与组件功能联系起来

Answer 1

没有[] Angular不评估表达式，只使用cartoonBoxUrl()作为文字字符串。

<a href="javascript:void(0)" [routerLink]="cartoonBoxUrl()" routerLinkActive="active">Add Content to Cartoon Box</a>

Answer 2

<a href="javascript:void(0)" (click)=cartoonBoxUrl()>Add Content to Cartoon Box</a>

你的ts component.ts 文件中的

import {Router} from "@angular/router";
public ID: any;
constructor(private router: Router){}
cartoonBoxUrl(){
 this.ID = Your LinkId;
 this.router.navigate(['YourRouteLink/', this.ID]);

}