时间戳

首页 > 解决方案 > 带参数的角路由器

javascript - 带参数的角路由器

问题描述

我创建了一个带有包含 id 和子路由的父路由的路由器。问题是，当我想使用选项卡在子路由下导航时，出现错误：

错误：无法匹配任何路由。URL 段：'tabs/user/1/overview'。错误：无法匹配任何路由。URL 段：'tabs/user/1/overview'。

用户路由器：

export const routes: Routes = [
{
 path: 'user/:id', 
 component: UserdetailComponent,
 resolve: {
  test: dataResolver,
 },
 children: [
  { path: '', redirectTo: 'overview', pathMatch: 'full' },
  { path: '', redirectTo: 'overview', pathMatch: 'full' },
   { path: 'overview', loadChildren: () =>
      import('./overview-module/overview.module').then(
        m => m.OverviewModule
      )
   },
   { path: 'contact', loadChildren: () =>
      import('./contact-module/contact.module').then(
        m => m.ContactModule
      )
   },
 ]}];

export const UserModule: ModuleWithProviders = RouterModule.forChild(
 routes
);

概览路由：

@NgModule({
 declarations: [OverviewComponent],
 imports: [
    CoreModule,
    RouterModule.forChild([
        {
            path: '',
            component: OverviewComponent,
        }
    ]),
 ],
exports: [OverviewComponent]
})

导出类 OverviewModule {}

和我的标签的一个按钮：

<ion-button
size="small"
fill="clear"
color="text"
[routerLink]="[userId, 'overview']"

是因为我的子路由附加到有自己的路由器的模块上吗？请问我该如何解决我的问题？

编辑：我尝试过使用组件并通过在每条道路上添加我的 :userId ，我可以在道路上导航但我卡住了。我猜它进入子路由并且找不到其他路由....

谢谢

标签： javascriptangulartypescriptangular-ui-router

解决方案

我认为您需要将路由器链接更改为

[routerLink]="['/tabs/user', userId, 'overview']"

我们需要先指定父路径，然后我们可以添加子路径。让我知道它是否有效。

推荐阅读