为什么在带有路由器的子路由中发送参数在我的angular2项目中不起作用？

Question

我试图在我的angular2应用程序中建立一个路由系统，但是不能发送参数。已经检查了各种路由器推荐的教程，而且这段代码似乎是正确的，但我仍然会遇到错误。

app.component.ts

    <li id="whatsup" (click)="loadField('whatsup')" ><a [routerLink]="['Whats']"> Whatsup?</a></li>
...
    @RouteConfig([
        {path: '/whatsup/...', name: 'Whats', component: Whatsup, useAsDefault:'true'},

whatsup.component.ts

<li class="list-group-item"><a [routerLink]="['Tod', {day:'today'}]">Today</a></li>
...
@RouteConfig([
    {path:"/whichday/:day", component: Today, name:'Tod'}

today.component.ts

import {RouteParams} from "@angular/router-deprecated";

...

    export class Today implements OnInit{
        list:string;
        day:string;

        constructor(private _routeParams: RouteParams){}
        constructor(private _http: Http){}

        ngOnInit():any {
            this.day = this._routeParams.get('day');

...

我知道这个错误：

异常：./AppComponent类AppComponent中的错误-内联模板:14:68 browser_adapter.js:86异常：./AppComponent类AppComponent中的错误-内联模板:14:68 browser_adapter.js:77:13 原始异常:传递的参数中不包括“天”的路由生成器。

Answer 1

确定了两种导航方式，一种是从[routerLink]属性导航，另一种是以编程方式使用(click)事件

- 属性：

在您的:day文件中定义whatsup.component.ts值，例如：

private today: string = 'sunday';

在模板中

<a [routerLink]="['Tod', {day: today }]"></a>
<!-- notice today written without quotation mark -->

请注意，您的@RouteConfig([])应该只在app.component.ts文件中配置，因为它是所有东西的根

-程序解决方案(如文档中所示)：

在你的模板中

<div (click)="gotoDetail(day)"></div>

在component.ts文件中

gotoDetail(day: string) {
  let link = ['Tod', { id: id }];
  this.router.navigate(link);
}

PS:试着使用一个constructor，这是一个更好的实践

希望我的解决方案有帮助！