コンポーネント間を遷移した際のサービスのインスタンスの保持について

コンポーネント毎にサービスのインスタンス生成ができない からの続きです。

コンポーネント毎にページングのためのサービスのインスタンスを生成したところ、
他の問題が発生しました。
それは、検索結果のリスト内の編集画面にページを遷移し、元の検索結果を表示するコンポーネントに戻る場合
サービスのインスタンスが再生成されるため、サービス内のページング情報が全て初期化されるため検索前の画面に戻ってしまうためです。

異なるコンポーネント間で遷移をしたときに、どのようにしてサービスの情報を保持すれば良いのでしょうか。

restaurants-list-components.ts

import { PaginationService } from '../dataServices/pagination.service';

@Component({
  selector: 'restaurants',
  templateUrl: './restaurants-list-component.html',
  styleUrls: ["./restaurants-list-component.css"],
  providers: [PaginationService]
})
export class RestaurantListComponent implements OnInit{
  constructor(
    private paginationService: PaginationService,
  ) {
  }
 edit(id: string) {
    this.router.navigate(["ui/restaurant/" + id]);
  }
#以下略
}

restaurant-edit-component.ts

import { Component, OnInit } from '@angular/core';
import { VehicleService, restaurant } from "../dataServices/vehicle.service";
import { Router } from "@angular/router";
import { ActivatedRoute } from "@angular/router";
import { Location } from '@angular/common';
import { PaginationService } from '../dataServices/pagination.service';

@Component({
  selector: 'restaurant-edit',
  templateUrl: './restaurant-edit-component.html'
})
export class restaurantEditComponent implements OnInit {
  public restaurant: restaurant;
  public errorMessage: string;
  public editMode = false;

  
  constructor(
    public paginationService: PaginationService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location
  ) {

    this.activatedRoute.params.subscribe(params => {
      if (params && params.id) {
        this.editMode = true;
        this.restaurant = new restaurant();
        this.restaurant.id = params.id;
      }
    });
  }

  #略
  
  save() {
    this.errorMessage = null;

    if (this.editMode) {
      this.vehicleService.updaterestaurant(this.restaurant).subscribe(success => {
        this.router.navigate(["ui/restaurants"]);
      }, error => {
        this.errorMessage = error;
      });
    } else {
      this.vehicleService.createrestaurant(this.restaurant).subscribe(success => {
        this.router.navigate(["ui/restaurants"]);
      }, error => {
        this.errorMessage = error;
      });
    }
  };

  cancel() {
    this.router.navigate(["ui/restaurants"]);
  }
}

一般的な実装だと、ページネーションするたびにURLに今何ページ目かという情報や検索の条件などは埋め込むようにしておいて、詳細ページからは単純に location.back() で戻る、というのが多いと思います。あるいは、詳細ページのURLにも元ページのパラメータを埋め込んでおいて、リストに戻るときにそれを使って復帰させるような形ですね

サービスにて保持している情報をURLに埋め込むようにしました。
詳細ページからlocation.back()で戻ってきたときに、ActiveRouteからURLのパラメータを取得し、
パラメータの内容に応じて、元の状態を復元させるようにしました。
ご回答ありがとうございました。

1 Like