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进行修饰或具有有效的类型注释，并确保＆＃39;路由器＆＃39;用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如何将路由参数绑定到变量

2 个答案: