Question

我有一个加载子组件的步进器。

我希望用户在想要后退或前进一步时能够按下浏览器的后退和前进按钮。

我的猜测是在Location中使用@angular/common服务并将其存储在历史记录中。

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

这可行，但是控制台日志中出现错误

错误：未捕获（承诺）：错误：无法匹配任何路由。网址区隔：“服务/车辆/”

这是因为没有路线，只是装饰，仅用于按下浏览器的后退按钮。

是否可以具有这样的功能，而无需解析URL来检查我使用的参数？我的猜测是你这样做。
由于相同的原因，后退按钮出错，因此前进按钮不起作用。我开始认为他们唯一拥有前进的方法就是将路径作为查询参数。这是真的吗？
我可以以某种方式停止前进按钮或将其重定向到其他地方吗？

实际上，我要做的只是使后退按钮或前进按钮不离开该车辆部件。

Answer 1

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

Answer 2

如果不在URL中使用查询参数，则必须检查哪个车辆的URL并将其与字符串值进行比较。不幸的是，在这种情况下不能有查询参数

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

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

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

2 个答案: