英文:
Angular: Nested route with default
问题
以下是您要翻译的内容：
我有一个页面（已在“router-output”中），位于路由/products。该页面本身还有另一个“router-output”，将有2个可能的子页面（/products/professional和/products/consumer）。
当用户访问/products（没有嵌套路由）时，我希望他们被路由到/products/professional。
这是我的路由设置：
const routes: Routes = [
{
path: '',
component: ProductsComponent, // 此组件包含子路由的“router-outlet”，因为它们共享相同的标题
redirectTo: '/professional', // 不起作用！
children: [
{
path: 'professional',
loadComponent: () =>
import('...').then((c) => c.AComponent)
},
{
path: 'consumer',
loadComponent: () =>
import('...').then((c) => c.BComponent)
}
]
}
];
显然，我不能同时使用redirectTo和children来配置相同的路由。它会引发此错误：
错误：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:
const routes: Routes = [
{
path: '',
component: ProductsComponent, // this component includes `router-outlet` for the child routes as they share the same header
redirectTo: '/professional', // won't work!
children: [
{
path: 'professional',
loadComponent: () =>
import('...').then((c) => c.AComponent)
},
{
path: 'consumer',
loadComponent: () =>
import('...').then((c) => c.BComponent)
}
]
}
];
Obviously, I can't use redirectTo and children for the same route. It will throw this error:
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
{ path: '', redirectTo: 'professional', pathMatch: 'full' },
Complete example will look like
const routes: Routes = [
// add this new route object here.
{ 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)
}
]
}
];
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论