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

...

我收到此错误：

EXCEPTION：./AppComponent类中的错误AppComponent - 内联模板：14：68 browser_adapter.js：86   EXCEPTION：./AppComponent类中的错误AppComponent - 内联模板：14：68 browser_adapter.js：77：13

原始例外：'day'的路由生成器未包含在传递的参数中。

Answer 1

有两种方法可以从[routerLink]属性导航一个，一个用(click)事件以编程方式导航

- [routerLink]属性：

在: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这是一个更好的做法

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

为什么在我的angular2项目中使用router-deprecated的子路由中发送参数不起作用？

1 个答案: