Браузер назад и вперед кнопки для каждого шага в угловом материале Stepper

У меня есть степпер, который загружает дочерние компоненты.

Я хочу, чтобы пользователь мог нажимать кнопки браузера "назад" и "вперед", когда они хотят вернуться назад или вперед на шаг.

Мое предположение использует 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');
 }
}

Это работает, но я получаю сообщение об ошибке в журнале консоли

Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: "сервис / автомобиль /"

Это связано с тем, что маршрута нет, он косметический и предназначен только для нажатия кнопки возврата браузера.

  1. Могу ли я иметь такую ​​функциональность, не разбирая проверку URL для используемых мной параметров? Я думаю, что вы делаете.

  2. Кнопка "Вперед" не работает по той же причине, по которой я получаю ошибку с кнопкой "Назад". Я начинаю думать, что единственный способ получить форвард - это выбрать путь в качестве параметров запроса. Это правда?

  3. Могу ли я как-нибудь остановить кнопку "вперед" или перенаправить ее куда-нибудь еще?

На самом деле, все, что я хочу, это чтобы кнопка "Назад" или "Вперед" не покидала этот компонент автомобиля.

Источник

2 ответа

Решение

Без использования параметров запроса в URL-адресе вам придется проверить URL-адрес для какого транспортного средства и сравнить его со строковым значением. К сожалению, в этом случае не может быть параметров запроса

Я более или менее делал маленькие ярлыки, чтобы просто перенаправить меня обратно к пути компонента. Так что при обновлении, назад и вперед кнопки путь перенаправляется просто vehicle дорожка. Вот мой модуль маршрутизации:

  {path: 'vehicle/:vehType', pathMatch: 'full', redirectTo: 'vehicle'},
Источник

Вы можете попробовать рефакторинг, но попробуйте жестко запрограммировать весь URL и добавить динамическую часть в конце

Источник
Другие вопросы по тегам