Angular2 How to bind a route parameter to a variable

Question

I have a problem trying to bind the id of a route parameter to a variable.

The following error appears on the console:

EXCEPTION: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [['/envio',{id:'{{text}}'}]] in AppComponent@3:11 ("
        <h1>Angular 2 Boilerplate</h1>
        <p>Hello World!</p>
        <a [ERROR ->][routerLink]="['/envio',{id:'{{text}}'}]">Go</a>
    "): AppComponent@3:11

The component that throws the exception:

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig, RouterLink} from "angular2/router";
import {EnvioIDComponent} from "./id.component";

@Component({
    selector: 'my-app',
    template: `
        <h1>Angular 2 Boilerplate</h1>
        <p>Hello World!</p>
        <a [routerLink]="['/envio',{id:'{{text}}'}]">Go</a>
    `,
    directives: [ROUTER_DIRECTIVES]    
})

@RouteConfig([
    {path: '/home', name: 'Inicio', component: AppComponent, useAsDefault: true},
    {path: '/envio/:id', name: 'EnvioID', component: EnvioIDComponent},

])

export class AppComponent {

    text:string='fine';
}

Thanks in advance!!

Jiang YD · Accepted Answer · 2016-05-19 06:21:45Z

3

Simply use the variable directly:

<a [routerLink]="['EnvioID',{id:text'}]">Go</a>

A problem in your code is, you should use route name instead route path in routerLink.

answered May 19, 2016 at 6:21

Jiang YD

3,3091 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thierry Henry · Accepted Answer · 2016-05-19 16:53:02Z

0

I made several changes in my code, including your solution Jiang YD, and now the following error appears:

Cannot resolve all parameters for 'Router'(RouteRegistry, Router, ?, Router).

Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'Router' is decorated with Injectable.

The files of the project are:

boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router} from "angular2/router";

bootstrap(AppComponent,[ROUTER_DIRECTIVES, ROUTER_PROVIDERS,Router]);

app.component.ts

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig, RouterLink, Router, ROUTER_PROVIDERS} from "angular2/router";
import {EnvioIDComponent} from "./id.component";

@Component({
    selector: 'my-app',
    template: `
        <h1>Angular 2 Boilerplate</h1>
        <p>Hello World!</p>
        <a [routerLink]="['EnvioID',{id:text}]">Go</a>
    `,
    providers: [ROUTER_PROVIDERS],
    directives: [ROUTER_DIRECTIVES]  
})

@RouteConfig([
    {path: '/envio/:id', name: 'EnvioID', component: EnvioIDComponent}
])

export class AppComponent {

    text:string='fine';
}

id.component.ts

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteParams, RouteConfig, RouterLink, Router, ROUTER_PROVIDERS} from "angular2/router";
import {AppComponent} from "./app.component";

@Component({
    selector: 'envio',
    template: `
        <h1>Angular 2 Boilerplate</h1>
        <p>{{titulo}}{{id}}</p>
        <a [routerLink]="['Inicio']">Go back</a>
    `,
    providers: [ROUTER_PROVIDERS],
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: '/', name: 'Inicio', component: AppComponent, useAsDefault: true}
])

export class EnvioIDComponent {

    titulo:string='Success';
    id:string;

    constructor(private _params:RouteParams)
    {
        this.id=_params.get('id');
    }
}

answered May 19, 2016 at 16:53

Thierry Henry

331 silver badge7 bronze badges

5 Comments

Jiang YD Over a year ago

seems your project not configured well, i can not run the plnkr project you post. please use official example as base https://angular.io/resources/live-examples/toh-6/ts/plnkr.html

Thierry Henry Over a year ago

I already compared my project to that sample and made several changes, but a lot of errors still showing up...I don't know what I'm doing wrong. plnkr.co/edit/ImicQGUYXtqgtggSOMyN?p=preview

Thierry Henry Over a year ago

I fixed most of these errors but now the link of the children page (Go back) doesn't work plnkr.co/edit/IifRRkNEJJfMKc4GHtMi?p=previewplnkr.co/edit/…

Jiang YD Over a year ago

so bind a route parameter to a variable is solved right? please edit your question or ask another one.

Thierry Henry Over a year ago

Yes, the main question is already solved. I will ask a new one for that issue.Thanks for everything!

Collectives™ on Stack Overflow

Angular2 How to bind a route parameter to a variable

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related