Angular 2: Generate the route link using functions/ Dynamically generate the routerLink

问题

I want to create a route link dynamically.

I have the html loaded with the page however, i need to use an id in the URL which is available much later.

HTML :

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

The link in this routelink contains the id of the cartoon box(/carton-box/1). This id is available after the page loads. Therefore i need a way to create a route link to include this id.

So i believe we can do something like : routerLink="'cartoon-box/' + id" but i was hoping to link routerlink to a component function

回答1:

Without [] Angular doesn't evaluate the expression and just uses cartoonBoxUrl() as literal string.

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

回答2:

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

in your ts component.ts file do

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

}

来源：https://stackoverflow.com/questions/40544937/angular-2-generate-the-route-link-using-functions-dynamically-generate-the-rou