Angular2 So binden Sie einen Routenparameter an eine Variable

Question

Ich habe ein Problem beim Versuch, die ID eines Routenparameters an eine Variable zu binden.

Der folgende Fehler wird auf der Konsole:

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 

Die Komponente, die die Ausnahme auslöst:

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'; 
} 

Dank im Voraus !!

Answer 1

Nutzen Sie einfach die Variable direkt:

---

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

Ein Problem in Ihrem Code ist, sollten Sie Routennamen in routerLink stattdessen Route Pfad verwenden.

Answer 2

ich einige Änderungen in meinem Code gemacht, einschließlich Ihrer Lösung Jiang YD, und jetzt die folgende Fehlermeldung angezeigt:

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

Vergewissern Sie sich, dass alle Parameter mit Inject eingerichtet oder haben gültig Typenannotationen und dass ' Router 'ist mit Injectible dekoriert.

Die Dateien des Projekts sind:

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'); 
    } 
}