0

I have a stepper that loads child components.

I want the user to be able to press the browsers back and forward button when they want to go back or forward a step.

My guess is using the Location service in @angular/common and storing it the history.

import { Component, OnInit, ViewChild} from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-vehicle',
  templateUrl: './vehicle.component.html',
  styleUrls: ['./vehicle.component.css']
}) 

export class VehicleComponent implements OnInit {
@ViewChild('stepper') stepper;

ngOnInit() {
  this.location.subscribe(x => {
  this.stepper.selectedIndex = this.stepper.selectedIndex -1;
 });
}

// this adds that path to the url. I dont use path changes as params.
onVehClick() {
this.location.go(this.location.path() + '/vehicle');
 }

onTypeclick() {
this.location.go(this.location.path() + '/vehicle/jetski');
 }
}

This works but I get an error in the console log

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'service/vehicle/'

This is because there is no route, it's cosmetic and serves only the purpose of pressing the browsers back button.

  1. Can I have functionality like this without parsing the URL checking for the params I used? My guess is you do.

  2. The forward button doesn't work because of the same reason i get an error with the back button. Im starting to think they only way to have the forward is take the path as query params. is this true?

  3. Can i somehow stop the forward button or redirect it somewhere else?

In fact, all i want is to make the back button or forward button doesn't leave that vehicle component.

Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
Wahrenheit Sucher
  • 337
  • 4
  • 20

2 Answers2

0

you might want to try refactoring, but try hardcoding the entire url and add the dynamic part at the end

Sam Alexander
  • 504
  • 1
  • 6
  • 24
  • Refactor what might i ask? By hard cording the url do you mean making separate components for each step and then using the router? I'd really prefer not to do that. – Wahrenheit Sucher Jan 16 '19 at 18:24
  • try using location .path instead of location .go. And maybe have a enum that relates to the index of the current slide – Sam Alexander Jan 16 '19 at 21:41
  • If you look at my OP, I do use path. I just need to be able to mimic route changing so i cant get the back and forth button to work. – Wahrenheit Sucher Jan 18 '19 at 22:49
0

Without using query params in the url you would have to check for the url for which vehicle and compare it on the string value. Unfortunately there couldn't be query params in this instance

I more or less did little shortcuts the would just redirect me back to path of the component. So on refresh, back and forward button the path redirects to just vehicle path. Here is my routing module:

  {path: 'vehicle/:vehType', pathMatch: 'full', redirectTo: 'vehicle'},
Wahrenheit Sucher
  • 337
  • 4
  • 20