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

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

0 голосов
/ 15 января 2019

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

Я хочу, чтобы пользователь мог нажимать кнопки «Назад» и «Вперед» в браузерах, когда они хотят перейти назад или вперед.

Я предполагаю, что использую сервис 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 ]

0 голосов
/ 12 февраля 2019

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

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

  {path: 'vehicle/:vehType', pathMatch: 'full', redirectTo: 'vehicle'},
0 голосов
/ 15 января 2019

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

...