Angular 9 路径子在导航上不起作用

Question

我有一个父路径的子路径，但当我调用它时，它将url改为正确的路径，但加载ProductDetailsComponent而不是ChangeEmailComponent。

app-routing.ts

 const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path:':productName/:productId', component: ProductDetailsComponent },
  { path:'perfil', component: ProfileComponent, children: [
    { path: 'email', component: ChangeEmailComponent },
  ]},
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '/404'}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, enableTracing: false })
  ],
  exports: [RouterModule]
})

ProfileComponent.ts

this.router.navigate(['email'], { relativeTo:this.route });

将url改为fileemail，但打开ProductDetailsComponent而不是ChangeEmailComponent。

Answer 1

在profilecomponent里面放一个路由器出口，或者把你的路由改为:-。

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path:':productName/:productId', component: ProductDetailsComponent },
  { path:'perfil', children: [
    { path: '', component: ProfileComponent},
    { path: 'email', component: ChangeEmailComponent },
  ]},
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '/404'}
];

解释请参考:- https:/medium.com@aakashgarg19the-of-nested-router-outlets-in-angular-dafb38245a30。

Answer 2

试着给你的产品路线加个前缀。

从

{ path:':productName/:productId', component: ProductDetailsComponent },

到

{ path:'product/:productName/:productId', component: ProductDetailsComponent },

Answer 3

解决方案如上所述，必须将两者结合起来。

  const routes: Routes = [
      { path: '', redirectTo: '/home', pathMatch: 'full'},
      { path: 'home', component: HomeComponent },
      { path:'product/:productName/:productId', component: ProductDetailsComponent },
      { path:'perfil', children: [
        { path: '', component: ProfileComponent},
        { path: 'email', component: ChangeEmailComponent },
      ]},
      { path: '404', component: NotFoundComponent },
      { path: '**', redirectTo: '/404'}
];