Angular 2：使用函數生成路由鏈接/動態生成routerLink

Question

我想動態創建路由鏈接。

我有HTML加載的頁面，但是，我需要在URL中使用一個ID，這是可用的更晚。

HTML：

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

在此routelink該鏈接包含卡通盒的ID（/箱盒/ 1）。這個ID在頁面加載後可用。因此，我需要一種方法來創建一個路線鏈接來包含此ID。

所以我相信我們可以這樣做：routerLink="'cartoon-box/' + id"，但我希望routerlink鏈接到一個組件功能

Answer 1

沒有[]角不計算表達式和只使用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]); 

}