Angular:带有默认值的嵌套路由

huangapple go评论107阅读模式
英文:

Angular: Nested route with default

问题

以下是您要翻译的内容:

我有一个页面(已在“router-output”中),位于路由/products。该页面本身还有另一个“router-output”,将有2个可能的子页面(/products/professional和/products/consumer)。

当用户访问/products(没有嵌套路由)时,我希望他们被路由到/products/professional。

这是我的路由设置:

  1. const routes: Routes = [
  2. {
  3. path: '',
  4. component: ProductsComponent, // 此组件包含子路由的“router-outlet”,因为它们共享相同的标题
  5. redirectTo: '/professional', // 不起作用!
  6. children: [
  7. {
  8. path: 'professional',
  9. loadComponent: () =>
  10. import('...').then((c) => c.AComponent)
  11. },
  12. {
  13. path: 'consumer',
  14. loadComponent: () =>
  15. import('...').then((c) => c.BComponent)
  16. }
  17. ]
  18. }
  19. ];

显然,我不能同时使用redirectTochildren来配置相同的路由。它会引发此错误:

错误:NG04014:路由“{path:“products/”,redirectTo:“professional”}”的配置无效:请提供“pathMatch”。默认值为“prefix”,但通常意图是使用“full”。

我已经看到类似的问题(及其各自的答案),但我不能调整这些答案以适应我的情况。

英文:

I have a page (which is already in a router-output) on the route /products. The page itself does have another router-output which will have 2 possible children (/products/professional and /products/consumer).

When a user visits /products (without nested route), I want them to be routed to /products/professional.

This is my routes setup:

  1. const routes: Routes = [
  2. {
  3. path: '',
  4. component: ProductsComponent, // this component includes `router-outlet` for the child routes as they share the same header
  5. redirectTo: '/professional', // won't work!
  6. children: [
  7. {
  8. path: 'professional',
  9. loadComponent: () =>
  10. import('...').then((c) => c.AComponent)
  11. },
  12. {
  13. path: 'consumer',
  14. loadComponent: () =>
  15. import('...').then((c) => c.BComponent)
  16. }
  17. ]
  18. }
  19. ];

Obviously, I can't use redirectTo and children for the same route. It will throw this error:

  1. Error: NG04014: Invalid configuration of route '{path: "products/", redirectTo: "professional"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.

I have seen similar questions (and their respective answers) but I bring my brain to adjust these answers to my case.

答案1

得分: 1

{ path: '', redirectTo: 'professional', pathMatch: 'full' },

完整示例将如下:

const routes: Routes = [
// 在这里添加新的路由对象。
{ path: '', redirectTo: 'professional', pathMatch: 'full' },

{
path: '',
component: ProductsComponent,
children: [
{
path: 'professional',
loadComponent: () => import('...').then((c) => c.AComponent)
},
{
path: 'consumer',
loadComponent: () => import('...').then((c) => c.BComponent)
}
]
}
];

英文:

Add redirectTo as a separate object

  1. { path: '', redirectTo: 'professional', pathMatch: 'full' },

Complete example will look like

  1. const routes: Routes = [
  2. // add this new route object here.
  3. { path: '', redirectTo: 'professional', pathMatch: 'full' },
  4. {
  5. path: '',
  6. component: ProductsComponent,
  7. children: [
  8. {
  9. path: 'professional',
  10. loadComponent: () => import('...').then((c) => c.AComponent)
  11. },
  12. {
  13. path: 'consumer',
  14. loadComponent: () => import('...').then((c) => c.BComponent)
  15. }
  16. ]
  17. }
  18. ];

huangapple
  • 本文由 发表于 2023年7月17日 19:32:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/76704040.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定