我正在使用服务在用户输入文本框时从api中提取数据。在用户点击项目的详细信息页面之前，一切都很有效。应用程序路由到该项目，然后在应用程序中按下后退按钮时，不保存用户的输入，并且输入和影片列表组件为空。
问题：我正在寻找Angular 2保存此输入的方式，以便当用户返回电影列表时，数据就可用于之前的搜索查询
用户在此处输入他们的电影标题，用户停止输入后会从电影服务中返回一个observable。
搜索-textbox.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MovieService } from '../movie.service';
import { Observable } from 'rxjs/Rx';
@Component({
selector: 'app-search-textbox',
templateUrl: './search-textbox.component.html',
styleUrls: ['./search-textbox.component.scss'],
providers: [MovieService]
})
export class SearchTextboxComponent implements OnInit {
private movies;
private title = new FormControl();
constructor(private movieService: MovieService) {
this.title.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.flatMap(title => this.movieService.getMovies(title))
.subscribe(movies => this.movies = movies);
}
ngOnInit() {}
}
搜索-textbox.component.html
<div class="row searchbox">
<div class="col-md-12">
<input type="text" [formControl]="title" placeholder="Enter Title" autofocus/>
</div>
</div>
<div class="row" [class.loading]="!movies && title.value ">
<app-movie-list [movies]="movies"></app-movie-list>
</div>
电影列表组件可以通过输入装饰器访问api调用返回的电影。
电影list.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { MovieService } from '../movie.service';
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: ['./movie-list.component.scss'],
providers: [MovieService]
})
export class MovieListComponent implements OnInit {
@Input() movies: Object[];
constructor(
private router: Router,
private movieService: MovieService
) {}
ngOnInit() {}
gotoDetail(selectedMovieID): void {
this.router.navigate(['./detail', selectedMovieID])
}
}
电影list.component.html
<div *ngFor="let movie of movies">
<div *ngIf="movie.Poster != 'N/A'"
class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card">
<img class="card-img-top" [src]="movie.Poster" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">{{movie.Title}}</h4>
<p class="card-text">{{movie.Year}}</p>
<button (click)="gotoDetail(movie.imdbID)" class="btn btn-success">Details</button>
</div>
</div>
</div>
</div>
当用户通过this.location.back（）重新路由时，搜索输入为空
电影detail.component.ts
import { Component, OnInit } from '@angular/core';
import { MovieService } from '../movie.service';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'app-movie-detail',
templateUrl: './movie-detail.component.html',
styleUrls: ['./movie-detail.component.scss'],
providers: [MovieService]
})
export class MovieDetailComponent implements OnInit {
private movie: Object;
constructor(
private movieService: MovieService,
private route: ActivatedRoute,
private location: Location
) {}
ngOnInit() {
this.route.params
.switchMap((params: Params) => this.movieService.getMovieDetails(params['id']))
.subscribe((movie: Object) => this.movie = movie)
}
goBack(): void {
this.location.back();
}
}
电影detail.component.html
<div *ngIf="movie">
<div class="row">
<div class="col-md-6">
<img [src]="movie.Poster" />
</div>
<div class="col-md-6 movie-details">
<h1>{{movie.Title}}: {{movie.Year}}</h1>
<div *ngIf="movie.tomatoMeter != 'N/A'">
<progress class="progress progress-striped progress-success" [class.progress-danger]="movie.tomatoMeter < 50" value="{{movie.tomatoMeter}}" max="100"></progress>
<h1>{{movie.tomatoMeter}}%</h1>
<div class="consensus">
<p>{{movie.tomatoConsensus}}</p>
</div>
</div>
</div>
</div>
<button (click)="goBack()" class="btn btn-info">Go Back</button>
</div>
movie.service.ts
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
@Injectable()
export class MovieService {
constructor (private http: Http) {}
private moviesUrl = 'http://omdbapi.com?s=';
private movieDetailsUrl = 'http://omdbapi.com?i=';
getMovies(searchInput: string) : Observable<Object[]>{
return this.http.get(this.moviesUrl + searchInput)
.map((res:Response) => res.json().Search)
.catch((error:any) => Observable.throw(error.json().error || 'error'));
}
getMovieDetails(movieID: string) : Observable<Object> {
return this.http.get(this.movieDetailsUrl + movieID + '&tomatoes=true') // add rotten tomatoes param
.map((r: Response) => r.json())
.catch((error:any) => Observable.throw(error.json().error || 'error'));
}
}
答案 0 :(得分：0)
在路线加载时，参数不会保留。
您需要将它们临时存储在会话存储/位置存储中。