[英]Angular router with optional parameter
Is there a way to accomplish such an approach without duplicating the code for children
property?有没有办法在不复制
children
财产代码的情况下完成这种方法?
const routes: Routes = [
{
path: '', component: SmartSearchComponent, canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
children: [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{
path: 'member-profile/:mcid',
component: MemberProfileComponent,
children: [
{path: '', redirectTo: 'member-info', pathMatch: 'full'},
{path: 'member-info', pathMatch: 'full', component: MemberInfoComponent},
{path: 'id-cards', component: IdCardsComponent},
{path: 'register-family-members', component: RegisteredFamilyMembersComponent},
{path: 'associate-caregivers', component: AssociateCaregiversComponent},
{path: 'member-preferences', component: MemberPreferencesComponent},
{path: 'two-fa-info', component: TwofaInfoComponent},
{path: 'coverage/:hcid', component: CoverageComponent},
]
},
{
path: 'member-profile/:mcid/:hcid',
component: MemberProfileComponent,
children: [
{path: '', redirectTo: 'member-info', pathMatch: 'full'},
{path: 'member-info', pathMatch: 'full', component: MemberInfoComponent},
{path: 'id-cards', component: IdCardsComponent},
{path: 'register-family-members', component: RegisteredFamilyMembersComponent},
{path: 'associate-caregivers', component: AssociateCaregiversComponent},
{path: 'member-preferences', component: MemberPreferencesComponent},
{path: 'two-fa-info', component: TwofaInfoComponent},
{path: 'coverage/:hcid', component: CoverageComponent},
]
}
]
}
];
I have a code duplication for route member-profile/:mcid
and member-profile/:mcid/:hcid
which I don't quite like.我不太喜欢路由
member-profile/:mcid
和member-profile/:mcid/:hcid
hcid 的代码重复。 I tried to have a function that would create these 2 objects, but Angular is complaining I cannot have methods in templates.我试图有一个 function 来创建这两个对象,但 Angular 抱怨我不能在模板中有方法。
If I use the route as member-profile/:mcid/:hcid?
如果我将路由用作
member-profile/:mcid/:hcid?
it doesn't work either.它也不起作用。
Any better approach for this?有什么更好的方法吗?
// Declaration
const appRoutes: Routes = [{ path: employee, component: abcComp }]
// You dont need to set Query parameter in routing
// Implementation in Ts
this.route.navigate(['employee'], { queryParams: { name: 'a' } })
//queryParamsHandling='Merge' or 'retain' these options is also used to retain the parameters or to merge them
// Catching in Ts
constructor(private route : ActivateRoute){
}
let name = this.route.snapshot.queryParamMap.get('name');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.