Сохранение данных в службе в Angular 2

Я работаю с сервисом для извлечения данных из api при вводе пользователем в текстовое поле. Все работает отлично, пока пользователь не нажимает на страницу сведений элемента. Приложение направляется к элементу, затем при нажатии кнопки Назад в приложении ввод пользователя не сохраняется, а компонент ввода и списка фильмов пуст.

Проблема: я ищу угловой 2 способ сохранения этого ввода, чтобы, когда пользователь возвращается в список фильмов, данные для их предыдущего поискового запроса

Пользователь вводит свой заголовок фильма здесь,где наблюдаемый возвращается из службы фильмов после того, как пользователь перестает печатать.

поиск-textbox.деталь.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.деталь.формат 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 через декоратор ввода.

movie-list.деталь.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])
  }
}

movie-list.деталь.формат 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>

Когда пользователь перенаправляется обратно через это.местоположение.back (), входные данные поиска пусты

фильм-деталь.деталь.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();
  }

}

фильм-деталь.деталь.формат 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>

кино.услуга.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'));
  }

}

1 ответ

  1. При загрузке маршрута параметры не сохраняются.

    Вы должны хранить их временно в хранилище сеанса / хранилище местоположения.

    1. На CanDeActivate () маршрута страницы списка храните их в хранилище местоположения / сеанса
    2. На ngOnInit () метод в SearchTextboxComponent, читать из хранилища и привязать его к шаблону.