Question

我正在开发一个基于Angular2的测验，其中包含一些“静态”组件（home，faq等）和一个代表测验卡的组件。我的设置使用带占位符的路径，如下所示：

{
  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的构造函数中订阅路由的参数：< / p>

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

这就像一个魅力：点击next / prev更新卡片和浏览器后退/前进我能够查看卡片的历史记录。我认为一切都很完美，但我发现至少有一个用例不起作用：

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

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

Answer 1

实际上，在阅读Location的文档后，我认为这确实是问题所在。这是一项与浏览器网址互动的服务，您应该使用Router在应用内进行导航。

如文件中所述：

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

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

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

它应该按预期工作。

路径参数订阅在Angular2中未可靠触发

1 个答案: