在 angular 路由中间使用通配符？

Question

我正在使用一个页面来收集和显示数百条不同路线的数据。我希望我的页面上有 "tabs"，以便在不同的信息之间导航，但是我似乎无法在组件中创建后缀或使用通配符。我还想重定向到 /tab1

的 child

我拥有的（和作品）

我有一个应用程序。它有 1 条路线、XXX 和 1 个组件 xxx.component.ts （真实app其实同级路由有20条，暂时不重要）
xxx.component.ts 从 json 文件中拉入一个菜单，其中包含许多链接：

xxx/111/222
xxx/333/444
xxx/122/212

我在 xxx.routing 中没有路由，只有一个重定向到 xxx.component.ts

的通配符

xxx.component.ts 本质上使用 urlfragments 获取 111 和 222，然后转到 API 获取 111/222 的数据。 XXX下的所有页面都是相同的格式，只是数据不同。

到目前为止一切正常！（耶）

我想不通的事

现在，我想要选项卡或另一层导航，具体取决于您希望如何查看它。

xxx/111/222/tab1
xxx/111/222/tab2
xxx/111/222/tab3

我也想重定向到 tab1 如果我只是点击 xxx/111/222

我已经尝试在组件的路由中包含 xxx/*/*/tab1 之类的东西，但它不起作用。
我看过使用变量 xxx/:var1/:var2/tab1 但它不起作用。

routing.ts

const routes: Routes = [
  {
    path: '',
    component: DashboardsComponent,
    children: [
        {
          path: 'xxx',
          loadChildren: './xxx/dashboards-xxx.module#DashboardsxxxModule',
          pathMatch: 'prefix',
          // canActivate: [AuthGuardService],

    },
    ],
  }, {
    path: '**',
    component: NotFoundComponent,
  },
];

xxx.routing.ts

const routes: Routes = [
  {
    path: '**',
    component: DashboardsxxxComponent,
    // canActivate: [AuthGuardService],
  },
];

Answer 1

据我所知，您无法匹配通配符；它被设计为 catch-all 如果没有路径 Angular 可以首先匹配。

如果您丢失了前缀匹配，您应该能够使用 'xxx' 路由转到您的惰性模块，然后使用路由参数匹配您的段并处理重定向。

如果您将根路由构造为：

export const appRoutes: Route[] = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      {
        path: 'xxx',
        loadChildren: './tabs/tabs.module#TabsModule',
      }
    ]
  }
];

你的 child 路线为：

export const tabRoutes: Route[] = [
  {
    path: ':param1/:param2/:tab',
    component: TabsComponent,
  },
  {
    path: ':param1/:param2',
    redirectTo: ':param1/:param2/tab1'
  }
];

它应该按预期工作。 StackBlitz 似乎不喜欢我的路由导入，但这是一个有效的示例：https://1drv.ms/u/s!Aun50jHsxPB0gcd5dMXKK4GsAalcbA

在 angular 路由中间使用通配符？

Using wildcards in the middle of an angular route?

angular

angular-ui-router

我拥有的（和作品）

我想不通的事