Angular Material Stepper中每個步驟的瀏覽器前進和后退按鈕

Question

我有一個加載子組件的步進器。

我希望用戶在想后退或前進時可以按下瀏覽器的后退和前進按鈕。

我的猜測是在@angular/common使用Location服務並將其存儲在歷史記錄中。

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');
 }
}

這可行，但控制台日志中出現錯誤

錯誤：未捕獲（承諾）：錯誤：無法匹配任何路由。 網址段：“服務/車輛/”

這是因為沒有路線，只是裝飾，僅用於按下瀏覽器的后退按鈕。

1. 是否可以在不解析我使用的參數的URL的情況下具有這樣的功能？ 我的猜測是你做。

2. 前進按鈕由於相同的原因而無法正常工作，因為后退按鈕出現錯誤。 我開始認為他們唯一擁有前進的方法就是將路徑作為查詢參數。 這是真的？

3. 我可以以某種方式停止前進按鈕或將其重定向到其他地方嗎？

實際上，我想要做的只是使后退按鈕或前進按鈕不離開該車輛部件。

Answer 1

您可能想嘗試重構，但請嘗試對整個網址進行硬編碼，並在最后添加動態部分

Answer 2

如果不在網址中使用查詢參數，則必須檢查哪個車輛的網址並將其與字符串值進行比較。 不幸的是在這種情況下不能有查詢參數

我或多或少做了一些捷徑，它們只會將我重定向回組件的路徑。 因此，在刷新，后退和前進按鈕上，路徑將重定向到僅vehicle路徑。 這是我的路由模塊：

  {path: 'vehicle/:vehType', pathMatch: 'full', redirectTo: 'vehicle'},