Angular - 从详细组件导航回来答案

【问题标题】：Angular - navigate back from detail componentAngular - 从详细组件导航回来
【发布时间】：2018-01-02 09:19:58
【问题描述】：

我有一个页面“/categories”显示用户可以点击的多个类别。单击类别时，将显示详细信息页面，其中显示在 url '/categories/1' 中的类别 ID。

为了实现这一点，我通过以下方式配置了我的应用路由模块：

{
    path: `${locale}/categories`,
    component: CategoriesComponent
  },
  {
    path: `${locale}/categories/:id`,
    component: CategoryDetailComponent
  }

我使用以下代码导航到详细信息页面：

this.router.navigate([getLocaleFromStorage(), category.id]);

问题是，当我在详细信息页面上并返回浏览器时，我被发送到页面“/categories/categories”，而不仅仅是“/categories”。

我的第一个想法是覆盖后退导航，但我还没有找到一个好的方法来做到这一点。我找到了一篇解释如何实现这种结构的文章，但是他们在页面中添加了一个后退按钮，并在单击该按钮时导航回正确的页面。这可行，但如果仅使用浏览器的后退按钮，用户仍会被发送到“/categories/categories”页面。

有什么好方法可以实现我想要的吗？

The article I was speaking about

提前致谢！

【问题讨论】：

你的方法看起来像getLocaleFromStorage？
那个方法很好用，只是后退导航
您目前如何返回？
我没有实现后退导航，因为我不知道这是否是一个好习惯，也不知道如何去做。我在使用浏览器的后退按钮时注意到了这个问题。

标签： angular typescript routeparams

【解决方案1】：

我找到了问题。

代替

this.router.navigate([getLocaleFromStorage(), category.id]);

我应该用过

this.router.navigate([getLocaleFromStorage()+'/categories', category.id]);

因为我提供的 url 不存在，所以路由被 App 路由模块重定向到类别页面。

【讨论】：