Question

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

的子级

我拥有（并且可以工作）

我有一个应用。它具有1个路由，XXX和1个组件xxx.component.ts （实际的应用程序实际上在同一级别上有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

如果我刚刚打xxx / 111/222，我也想重定向到tab1

我在组件的布线中加入了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

据我所知，您无法匹配通配符；如果没有Angular可以首先匹配的路径，它可以作为一个包罗万象的东西。

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

如果您将根路由的结构设置为：

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

您的孩子的路线为：

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

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

在角度路线中间使用通配符？

我拥有（并且可以工作）

我不知道的事情

1 个答案: