错误的屏幕截图： http://imgur.com/eHiNEYi
链接到完整项目：
https://www.dropbox.com/s/84svnggv8xeub5m/FullProjectEbayClone.zip?dl=0
问题的背景：
该网站就像是ebay的克隆，但使用了一个从维基百科中获取数据的搜索栏。
我正在尝试制作一个按钮：
保存变量“item”或“item.name”（我试图通过点击“点击此处出价”按钮获取用户键入的搜索结果的名称这个项目“。）
将用户转移到该特定项目的出价页面。
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
-->
答案 0 :(得分：0)
{item}
this.router.navigate(['BiddingPage', {item}]);
无效。您可以传递包含字符串或对象的数组。 {item}既不是。
您可能想传递
this.router.navigate(['BiddingPage', {item: item}]);
或在新的RC.1路由器中
this.router.navigate(['BiddingPage/' + item]);