0

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

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

我的猜测是使用该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 段：'服务/车辆/'

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

  1. 我可以在不解析 URL 检查我使用的参数的情况下拥有这样的功能吗？我的猜测是你会的。

  2. 前进按钮不起作用，原因与我收到后退按钮错误的原因相同。我开始认为他们获得转发​​的唯一方法是将路径作为查询参数。这是真的？

  3. 我可以以某种方式停止前进按钮或将其重定向到其他地方吗？

事实上，我想要的只是让后退按钮或前进按钮不会离开该车辆组件。

4

2 回答 2

0

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

于 2019-01-15T19:35:01.503 回答
0

如果不使用 url 中的查询参数，您将不得不检查哪个车辆的 url 并在字符串值上进行比较。不幸的是，在这种情况下不能有查询参数

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

  {path: 'vehicle/:vehType', pathMatch: 'full', redirectTo: 'vehicle'},
于 2019-02-12T19:29:38.510 回答