【问题标题】:Ionic-angular - Routing is not working properly when I have multiple nested routes离子角度 - 当我有多个嵌套路由时,路由无法正常工作
【发布时间】:2019-10-03 09:37:13
【问题描述】:

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

app-routing.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-J-P/ionic-routing-issue.git

【问题讨论】:

    标签: angular ionic4 angular-routing angular8 router-outlet


    【解决方案1】:

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

    可以是这样的。

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

    【讨论】:

    • 我尝试使用 routerLink 以及使用路由器。目前,我正在使用 this.router.navigate(["add"], { relativeTo: this.route }); 也尝试通过给 .绝对路径this.router.navigateByUrl("/items/additem");
    猜你喜欢
    • 1970-01-01
    • 2017-10-20
    • 2016-10-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-26
    相关资源
    最近更新 更多