Angular2中未可靠触发路由参数订阅答案

【问题标题】：Route Parameter Subscription not triggered reliably in Angular2Angular2中未可靠触发路由参数订阅
【发布时间】：2017-08-12 21:30:24
【问题描述】：

我正在开发一个基于 Angular2 的测验，其中包含一些“静态”组件（家庭、常见问题解答等）和一个代表测验卡的组件。我的设置使用带有占位符的路由，如下所示：

{
  path: 'quiz/:questionPage',
  component: QuizComponent
},

这里questionPage应该是数字...

要切换测验卡，我将更改位置并显示新卡：

import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router'
...
constructor (
      private route: ActivatedRoute,
      private location: Location) {...}
...
showQuestion(next) {
  this.location.go ('quiz/' + next);
  this.showQuestion (next);
}

要在QuizComponent 中实现浏览器后退/前进（除了测验卡中的下一个/上一个），我想我可以只订阅QuizComponent 的构造函数中的路由参数：

this.route.params.subscribe(params => {
  console.log ("found params: ", params);
});

这就像一个魅力：点击下一个/上一个更新卡片并使用浏览器后退/前进，我可以浏览卡片的历史。我认为一切都很完美，但我发现至少有一个用例不起作用：

如果我返回（无论多久）然后单击新内容，返回按钮只会更新位置（地址栏中的 URL），但 不会触发上述订阅 strong>（因此卡片不会更新）。如果我再点击一次，它会再次正常工作，但我会后退两步！？我可以再次前进以访问历史记录中的正确条目，但这当然很烦人...

所以..我做错了什么吗？也许这也是实现浏览器后退/前进的一种超级愚蠢的方法？

【问题讨论】：

通常我会使用路由器而不是位置来导航，但不确定在这种情况下是否会有所不同。

标签： angular typescript angular2-routing

【解决方案1】：

实际上，在阅读了Location 的文档后，我认为这确实是问题所在。这是一个与浏览器 URL 交互的服务，您应该使用 Router 在您的应用中导航。

如文档中所述：

仅当您需要与之交互或创建规范化时才使用位置路由之外的 URL。

因此，如果您使用以下内容导航：

this.router.navigate(['quiz', next]);

它应该按预期工作。

【讨论】：

完美！非常感谢，真的！ :)