错误：“item”的路由生成器未包含在传递的参数中。 （打字稿、angular2、javascript、html）

Question

错误截图： http://imgur.com/eHiNEYi

链接到完整项目：

https://www.dropbox.com/s/84svnggv8xeub5m/FullProjectEbayClone.zip?dl=0

问题背景：

该网站类似于 ebay 的克隆，但使用从维基百科获取数据的搜索栏。

我正在尝试制作一个按钮：

1. 保存变量“item”或“item.name”（我试图通过单击名为“单击此处出价”的按钮来获取用户输入的任何搜索结果的名称这个项目”。）

2. 将用户转到该特定项目的出价页面。

html中按钮的代码（wiki.component.ts）：

 <button (click)="gotoItem(item)">Click here to bid on this item.</button>

函数“gotoItem(item)”的代码（wiki.component.ts）：

 gotoItem (item: any) {
    this.router.navigate(['BiddingPage', {item}]);
  }

指向 plunker 的链接以及有关此问题的更多详细信息：

stackoverflow.com/questions/37422205/displaying-data-that-is-consistent-with-search-results-on-a-different-webpage-t

wiki.component.ts 的完整代码

import { Component }        from 'angular2/core';
import { JSONP_PROVIDERS }  from 'angular2/http';
import { Observable }       from 'rxjs';
import { WikipediaService } from './wikipedia.service';
import {Router, RouteParams, RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  selector: 'Wikithing',
  template: `
    <h1>Search and Display Page</h1>
    <p><i>Fetches after each keystroke</i></p>
    <input #term (keyup)="search(term.value)"/>
    <ul>
     <li *ngFor="#item of items | async">{{item}} <br> <p> 

     </p> Price (in USD): $ {{item.price}} <br> <p>

      </p> Availability: 24 hours <br> <p> 

      </p> Quantity currently in stock: {{quantity}}

       <br> <p> 

      </p> Image of item: <img src="http://weknowyourdreamz.com/images/apple/apple-05.jpg" alt="Apple" style="width:100px;height:100px;">
       <br> <p> 
       </p>
               <p>

            </p>

             <a [routerLink]="['BiddingPage']">Click here to bid on this item.</a>
           <button (click)="gotoItem(item)">Click here to bid on this item.</button>
            <p>

                </p>
        <br> <p> 
       </li>
    </ul>
  `,
  providers:[JSONP_PROVIDERS, WikipediaService],
  directives: [ROUTER_DIRECTIVES, RouterLink],

})
export class WikiComponent {
  constructor (private wikipediaService: WikipediaService, private router:Router) {}
  items: Observable<string[]>;
  //  item: Item[] = [];



  search (term: string) {
    this.items = this.wikipediaService.search(term);
    this.items.map((items) => items.map(() => ({
      name: items,
      prices: Math.random(),
      quantity: Math.random(),
      availability: Math.random()
    })));

    var Prices = Math.random() + Math.random();
    var quantity = Math.random();
  }
  gotoItem (item: any) {
    this.router.navigate(['BiddingPage', {item}]);
  }
}

biddingpage.component.ts的完整代码：

import {Component, OnInit} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {Observable} from'rxjs/Rx'
import { WikipediaService } from './wikipedia.service';
import { Jsonp, URLSearchParams } from 'angular2/http';
import { Input } from 'angular2/core';
import { JSONP_PROVIDERS }  from 'angular2/http';
import { Subject }          from 'rxjs/Subject';
@Component({
  selector: 'BiddingPageComponent',
  templateUrl: 'app/BiddingPage.component.html',
  styleUrls: ['app/BiddingPage.component.css'],
  providers: [HeroService, JSONP_PROVIDERS, WikipediaService],
  directives: [ROUTER_DIRECTIVES]

})



export class BiddingPageComponent{
    constructor (private wikipediaService: WikipediaService) {}
      @Input() item : any;
myFunction(slotvalue) 
 {
        this.slot1 = slotvalue;
        this.numberofbids +=1;
         alert("You have entered a new bid.");
 }
  numberofbids = 0;
    slot1 = 0;
  secondsLeft = 0;
  hoursLeft = 0;
  mightbehours = 0;
  ticks = 0;

  items : any;
  ngOnInit(ticks, secondsLeft, hoursLeft, hoursLeft2){
    let timer = Observable.timer(2000,1000);
    let HoursOrMinutesTimer = Observable.timer(2000, 1000);
    let HoursLeftTimer = Observable.timer(2000, 1000);
    timer.subscribe(t=>this.ticks = t);
    secondsLeft = 100;
    timer.subscribe(t=>this.secondsLeft = -t + 86400);
    HoursOrMinutesTimer.subscribe(t=>this.hoursLeft = t/60);
    HoursLeftTimer.subscribe(t=>this.mightbehours = t/3600);
     //this.routeParams.get('item');



  }

  //items: Observable<string[]>;
  //  item: Item[] = [];



  search (term: string) {
     this.items = this.wikipediaService.search(term);
    this.items.map((items) => items.map(() => ({
      name: items,
      prices: Math.random(),
      quantity: Math.random(),
      availability: Math.random()
    })));

    var Prices = Math.random() + Math.random();
    var quantity = Math.random();




}


    //this.wikipediaService.getHero(item)
   //   .then(item => this.hero = item);


}

biddingpage.component.html的完整代码

<html>
    <center>
<h3>Bidding Page</h3>
<a name="top"></a>
</center>
<p>



 </p>




        <p>



          </p>


  <form>
        <img src="http://weknowyourdreamz.com/images/apple/apple-05.jpg" alt="Apple" style="width:100px;height:100px;">
        <p>
            </p>
        <label for="name">Name of item: {{item.name}} </label>
        <p>



          </p>
        <label for="name">Original Price: {{item.price}} </label>
         <p>



          </p>
           <p>



          </p>
        <label for="name">Number of items in stock: {{item.quantity}} </label>



         <p>
          </p>
        Description of item’s current condition:
         <p>



          </p>
                <label for="name">Description of item’s current condition: </label>
                <label for="name">The apple is a fleshy fruit from the apple tree. 
                    It is in the species Malus domestica in the rose family Rosaceae. 
                    The apple is one of the most grown tree fruits. It is grown in orchards.</label>
        <p>



            </p>
        <label for="name">Time elapsed (in seconds): {{ticks}} </label>


          <p>



          </p>


          <p>
          <label for="name">Time elapsed (in minutes): {{hoursLeft}} </label>


          </p>
          <p>

            </p>
          <p>
          <label for="name">Time elapsed (in hours): {{mightbehours}} </label>


          </p>
        <label for="name">Current highest bid: $ {{slot1}} </label>

        <p>




          </p>

 <p>
             <label for="name">Time left (in hours): {{secondsLeft/3600}} </label>
             <p>

          <p>
             <p>
             <label for="name">Time left (in minutes): {{secondsLeft/60}} </label>
             <p>

          <p>
             <label for="name">Time left (in seconds): {{secondsLeft}} </label>
             <p>

             NOTE: There are 86400 seconds in one day.



          </p>
           <label for="name">Number of bids so far: {{numberofbids}} </label>



          <p>



          </p>


  Bid slot 1: <p>$ {{slot1}} </p>
          <p>



          </p>


<label for="name">Enter your bid: </label>
<input type="number" #bid class="form-control" required>

<button (click)='myFunction(bid.value)'>Click here to bid.</button>



          <p>







          </p>









<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

Answer 1

{item} 在

this.router.navigate(['BiddingPage', {item}]);

无效。您可以传递包含字符串或对象的数组。 {item} 两者都不是。

你可能想通过

this.router.navigate(['BiddingPage', {item: item}]);

或在新的 RC.1 路由器中

this.router.navigate(['BiddingPage/' + item]);