Angular2 如何将路由参数绑定到变量

Question

我在尝试将路由参数的 ID 绑定到变量时遇到问题。

控制台出现以下错误：

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

抛出异常的组件：

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

提前致谢！！

Answer 1

直接使用变量即可：

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

您的代码中的一个问题是，您应该在 routerLink 中使用路由名称而不是路由路径。

Answer 2

我对我的代码进行了一些修改，包括您的解决方案 Jiang YD，现在出现以下错误：

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

确保所有参数都用 Inject 修饰或具有有效的类型注释，并且 'Router' 用 Injectable 修饰。

项目的文件是：

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

Angular2 如何将路由参数绑定到变量

Angular2 How to bind a route parameter to a variable

angular2-routing

angular