angular2向导导航历史记录

Question

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

https://maiyaporn.github.io/angular2-wizard-demo/（DEMO）

所以我在我的应用程序中使用这个简单的向导，并且我试图弄清楚如何来回导航（使用浏览器的后退和前进按钮或点击鼠标回去或转发。）

如果您通过提供的演示，当您到达第2步但想要返回时，似乎实际返回到第1步的唯一方法是单击＆＃34;之前的＆＃34;按钮。

我希望能够实际点击＆＃34;返回＆＃34; （在我的情况下，用我的鼠标）所以我可以回到第1步;点击＆＃34;返回＆＃34;用我的鼠标最终让我回到上一页。

我已经尝试过使用history.pushState（），但它仍然没有像我想的那样回到第1步。

这对我来说有点混乱和新鲜，因为我正在用angular2弄湿我的脚。由于这是一个父页面上有多个子组件，所以看起来我不能使用哈希（我可能错了）。

我想获得一些帮助，看看我能指出哪些方向正确。

提前致谢。

Answer 1

您将要使用路由。

按照教程： 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>

Answer 2

相信我找到了问题的答案。

它可能只是一个黑客，可能不是一个正确的答案，但它的工作就像我现在想要的那样。

我基本上进入了wizard-component.ts文件，并为每一步提供了一个哈希值。然后我使用onpopstate来监听历史记录并使用goToStep方法找到正确的步骤（通过哈希）。