[英]Angular Routing Parameter Routing Incorrectly
I am trying to setup my Angular routing and I do not think that I am doing it correctly.我正在尝试设置我的 Angular 路由,但我认为我做的不正确。 I have the following:
我有以下内容:
const routes: Routes = [
{
path: '',
children: [
{
path: '',
pathMatch: 'full',
redirectTo: '/login'
},
... // truncated for brevity
{
component: ClientErrorComponent,
path: 'error'
},
{
path: 'form',
children: [
{
component: FormEntriesComponent,
path: ':formId',
pathMatch: 'full',
children: [
{
component: FormEntryComponent,
path: ':id'
}
]
},
{
path: '',
pathMatch: 'full',
redirectTo: '/error?code=400&info=You cannot go to an empty form.'
}
]
}
]
},
{
path: '**',
redirectTo: '/error?code=400&info=Uh oh! Something went wrong, you used an invalid URL somehow.'
}
];
What I would like to do is when I go to localhost:4200/form/1
it goes to the first child child component of form
and when I go to localhost:4200/form/1/1
it goes to the first child's child component.我想做的是,当我去
localhost:4200/form/1
时,它会转到form
的第一个子子组件,当我转到localhost:4200/form/1/1
时,它会转到第一个孩子的子组件.
However, every time I try to go to the former it hits **
redirect.但是,每次我尝试转到前者时,它都会点击
**
重定向。
I thought followed the advice of this thread Angular router parameter , but I continue to hit the redirect.我以为遵循了这个线程Angular router parameter的建议,但我继续点击重定向。 What am I doing wrong?
我究竟做错了什么?
You're not getting route match, because you try to implement pathMatch: full
strategy.您没有获得路线匹配,因为您尝试实施
pathMatch: full
策略。
Router cannot find the route which has explicitly path form/:formId/:id
so it ignores it and hits "**"
redirect.路由器找不到具有明确路径
form/:formId/:id
的路由,因此它忽略它并点击"**"
重定向。
Notice that you're getting match for form/:formId
because path: 'form'
has default pathMatch strategy and it is able to access children segment and look for a :formId
match there.请注意,您正在匹配
form/:formId
因为path: 'form'
具有默认的 pathMatch 策略,并且它能够访问子段并在那里查找:formId
匹配项。
Remove this segment and make sure FormEntriesComponent has <router-outlet></router-outlet>
in it's template.删除此段并确保FormEntriesComponent在其模板中具有
<router-outlet></router-outlet>
。
{
path: 'form',
children: [
{
component: FormEntriesComponent,
path: ':formId',
children: [
{
component: FormEntryComponent,
path: ':id',
},
],
},
],
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.