Angular material 步进器中每个步骤的浏览器后退和前进按钮

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

这有效，但我在控制台日志中收到错误

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

这是因为没有路由，它是装饰性的，仅用于按下浏览器后退按钮的目的。

我可以在不解析 URL 检查我使用的参数的情况下拥有这样的功能吗？我猜你是。
前进按钮不起作用，原因与我使用后退按钮时出现错误的原因相同。我开始认为他们唯一的前进方式是将路径作为查询参数。这是真的吗？
我能以某种方式停止前进按钮或将其重定向到其他地方吗？

事实上，我只想让后退按钮或前进按钮不离开那个车辆组件。

Answer 1

您可能想尝试重构，但尝试对整个 url 进行硬编码并在末尾添加动态部分

Answer 2

如果不在 url 中使用查询参数，您将必须检查 url 的车辆并将其与字符串值进行比较。不幸的是，在这个实例中不能有查询参数

我或多或少做了一些快捷方式，它们只会将我重定向回组件的路径。因此，在刷新、后退和前进按钮上，路径重定向到 vehicle 路径。这是我的路由模块：

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

Angular material 步进器中每个步骤的浏览器后退和前进按钮

Browser back and forward button for each step in Angular material Stepper

javascript

angular-routing

angular

mat-stepper