История навигации мастера angular2

https://github.com/maiyaporn/angular2-wizard

https://maiyaporn.github.io/angular2-wizard-demo/ ( ДЕМО)

Итак, я использую этот простой мастер для своего приложения и пытаюсь понять, как я могу перемещаться вперед и назад (либо с помощью кнопок браузера «назад» и «вперед», либо с помощью мыши, чтобы вернуться назад или вперед).

Если вы пройдете предоставленную демонстрацию, когда вы дойдете до шага 2, но захотите вернуться назад, кажется, что единственный способ вернуться к шагу 1 — это нажать кнопку «предыдущий».

Я хочу иметь возможность щелкнуть «назад» (в моем случае с помощью мыши), чтобы вернуться к шагу 1; щелчок «назад» с помощью мыши вместо этого возвращает меня на предыдущую страницу.

Я пытался возиться с history.pushState(), но он все еще не возвращается к шагу 1, как я хочу.

Это немного сбивает с толку и ново для меня, так как я промокаю ноги с angular2. Поскольку это родительский компонент со многими дочерними компонентами на одной странице, не похоже, что я могу использовать хэши (могу ошибаться).

Просто хотел бы получить некоторую помощь в том, на что я мог бы взглянуть, чтобы указать мне в правильном направлении.

Заранее спасибо.


person cjros    schedule 28.04.2017    source источник


Ответы (2)


Поверьте, я нашел ответ на свой вопрос.

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

Я в основном зашел в файл wizard-component.ts и дал каждому шагу хэш. Затем я использовал onpopstate для прослушивания истории и использовал метод goToStep, чтобы найти правильный шаг (по хешу).

person cjros    schedule 29.04.2017

Вы захотите использовать маршрутизацию.

Следуйте инструкциям: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

Вкратце

  1. Добавьте <base href="/"> к index.html
  2. Импортируйте RouterModule в корневой модуль: import { RouterModule } from '@angular/router';
  3. Добавьте маршруты в корневой модуль: RouterModule.forRoot([{ path: 'heroes', component: HeroesComponent }])
  4. Вставьте розетку маршрутизатора в html-шаблон: <router-outlet></router-outlet>
  5. Начать использовать routerLinks: <a routerLink="/heroes">Heroes</a>
person travis.js    schedule 28.04.2017