CODEWITHSUNDEEP
angulartypescriptangular-cli
CStreet
CStreet

Reputation: 383

Service not keeping data after routing to new page - Angular 8

I have an Angular 8 application and I've created a DataService to access data between components when I'm routing to the different pages. For some reason, the data isn't persisting when I go to another page. I've researched the issue and tried the suggestion I've found on here and nothing seems to be working. I must be missing something small because I swear its right or at least very close.

Here is my data service:

import { Injectable, Injector } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';


@Injectable()
export class DataService {
  private _http: HttpClient;

  public stepOneValues = [];

  //Step One Values
  focusMetric = { name: "Focus Metric Selection(s)", value: null };
  focusMetricWeight = { name: "Metric Weights", value: null };
  preTimePeriod = { name: "Pre Time Selection", value: null };
  postTimePeriod = { name: "Post Time Selection", value: null };
  matchType = { name: "Match Type", value: null };
  overlappingControlStores = { name: "Overlapping Control Stores", value: null };
  excludeStoresCurrentlyTesting = { name: "Exclude Current Test Stores", value: null };
  excludeExceptionRecords = { name: "Exclude Exception Stores", value: null };

  constructor(injector: Injector) {}

  setStepOneValue(id, value) {
    let temp = this[id];
    temp.value = value;
    this[id] = temp;
  }

  getStepOneValues() {
    this.stepOneValues = [];

    this.stepOneValues.push(this.focusMetric);
    this.stepOneValues.push(this.focusMetricWeight);
    this.stepOneValues.push(this.preTimePeriod);
    this.stepOneValues.push(this.postTimePeriod);
    this.stepOneValues.push(this.matchType);
    this.stepOneValues.push(this.overlappingControlStores);
    this.stepOneValues.push(this.excludeStoresCurrentlyTesting);
    this.stepOneValues.push(this.excludeExceptionRecords);

    return this.stepOneValues;
  }
}

I'm providing the DataService in my app.module.ts. I also have the service in the constructor of both of my page component like so:

constructor(public _dataService: DataService) { }

On my first page when the value changes I run the following function:

preChange(evt) {
    console.log(evt);
    let dateString = evt.startDate.format('DD/MM/YYYY') + " - " + evt.endDate.format('DD/MM/YYYY');
    this._dataService.setStepOneValue("preTimePeriod", dateString);
    this._dataService.preTimePeriod.value = dateString;
  }

When I route to my second page I try retrieving the value like so: 

this.stepOneValues = this._dataService.getStepOneValues();

This just returns null for my preTimePeriod value and I can't figure out why. Super frustrated at this point and it's been like 3 hours of troubleshooting.

Upvotes: 0

Views: 1608

Answers (1)

CStreet
CStreet

Reputation: 383

I finally figured out what I was doing wrong. I was using:

href="/review"

instead of:

routerLink="/review"

Which was instantiating my service every time I went to a new page.

Upvotes: 3

Related Questions