时间戳

首页 > 解决方案 > 离子角度 - 当我有多个嵌套路由时，路由无法正常工作

angular - 离子角度 - 当我有多个嵌套路由时，路由无法正常工作

问题描述

我有两个页面，项目和用户。在项目页面内，我有子路线，添加/编辑/删除。在用户页面内，我有几个子路由，添加/删除。这使得路由结构如下所示。

应用程序路由.module.ts 

 {
    path: "users",
    loadChildren: "./users/users.module#UsersPageModule",

  },
  {
    path: "items",
    loadChildren: "./items/items.module#ItemsPageModule"
  }

users.module.ts

{
    path: "",
    component: UsersPage,
    children: [
      {
        path: "add",
        component: EditUserComponent
      },
      {
        path: "",
        component: UserListComponent,
        pathMatch: "full"
      }
    ]
  }

items.module.ts

{
    path: "",
    component: ItemsPage,
    children: [
      {
        path: "additem",
        component: ItemDetailsComponent
      },
      {
        path: "",
        component: ItemListComponent,
        pathMatch: "full"
      }
    ]
  }

问题：加载应用程序后，如果我在同一页面内的路径之间切换一切正常，但一旦我访问另一个页面并再次返回上一页并尝试导航它就不起作用。

例如。首先我访问/items 然后/items/add 再次/items/。在这里一切正常。当我访问 /users 并再次返回 /items 时，问题就开始了。因此，此时项目页面加载良好，与 /items 相关联。但如果我尝试导航 /items/add. UI 上似乎没有发生任何事情。

我打开了路线跟踪，发现它显示Router Event: NavigationEnd，任何线索为什么会发生这种情况？

这是 github 示例项目链接：https ://github.com/Dhananjay-JP/ionic-routing-issue.git 。

标签： angularionic4angular-routingangular8router-outlet

解决方案

你能告诉我们你是如何在你的 html 文件中编写导航链接的吗？

它可以是这样的。

<a [routerLink]="['users']">users</a>
<a [routerLink]="['items']">items</a>

推荐阅读