Question

我试图从一个页面导航到另一页面，但要在URL中保留以前的参数。

示例

>>> df['E'] = df.A.isin(df.C).replace({True: "Yes", False: "No"})
>>> df['F'] = df.B.isin(df.D).replace({True: "Yes", False: "No"})
>>> df
       A          B        C          D    E    F
0  alpha  spiderman    theta   superman  Yes  Yes
1   beta     batman    alpha  spiderman   No   No
2  gamma   superman  epsilon       hulk   No  Yes

我希望能够导航到下一页

currentRoute = '/b/users/edit;id=5cf691d8d2bbcf881ad4c792/village/store/edit;name=GameStore'

我不确定如何在URL中的不同位置传递多个参数。本质上，我想要实现的目标是：

/b/users/edit;id=5cf691d8d2bbcf881ad4c792/path/new;r=GameStore

编辑

这是我的路由结构：

this.router.navigate([`/b/user/edit`, {id: this.userid}, `/path/new`, { r: this.router.url }])

所以基本上我想从一个组件跳到另一个组件，但要保留父参数。

我没有运气就尝试使用{ path: 'b', children: [{ path: 'users', children: [{ path: 'edit', children: [{ path: 'village', children: [{ path: 'store, children: [{ path: 'edit', component : editBVillageStoreComponent }], path: 'path', children: [{ path: 'new', component: 'newBVillagePathComponent' }] }] }] }] } ]}。我可能只是用错了。

Answer 1

我假设您要路由到路径：“ path”，它是“ village”的子代。从技术上讲，子组件应紧随父组件。

根据Angular文档，子路由扩展了父路由的路径。因此，要么您的路由配置错误，要么是您尝试导航到子路径“ path”的方式。

因此，也许这是您想要做的事情： this.router.navigate([`/b/user/edit`, {id: this.userid}, `/village/path/new`, { r: this.router.url }])

Answer 2

您可以这样设置路线：

const appRoutes: Routes = [
  {
    path: "b",
    children: [
      {
        path: "users/:id",
        children: [
          {
            path: "edit",
            children: [
              {
                path: "village",
                children: [
                  {
                    path: "store",
                    children: [
                      {
                        path: "edit/:id",
                        component: HelloComponent
                      }
                    ]
                  },
                  {
                    path: "path",
                    children: [
                      {
                        path: "new",
                        component: HelloComponent
                      }]}]}]}]}]}
];

然后导航：

this.router.navigate([`/b/users/${this.userId}/edit/village/store/edit/${this.storeId}`]);

检查我根据您的代码制作的以下Stackblitz示例：https://stackblitz.com/edit/angular-xvbkej

单击按钮进行导航。检查生成的URL。

角度导航以使用多个参数进行路由

2 个答案: