有没有办法让父组件被跳过？

Question

我是 angular 的新手，想做一个小项目。当我遇到问题时，我正在做我的路由。我有这个路由。

const routes: Routes = [
    {path: '', redirectTo: '/home', pathMatch: 'full'},
    {path: 'home', component: LandingComponent},
    {path: 'menuitem', component: MenuItemComponent, children: [
        {path: 'create', component: MenuItemCreateComponent},
        {path: ':id', component: MenuItemDetailComponent}
    ]},
    {path: 'cart', component: CartComponent}
];

我希望 'menuitem' 被忽略，导航直接转到子项。就像如果我想通过 'menuitem/2' 加载一个特定的 id，它会加载 id = 2.

的菜单项

我正在学习一个使用父路径显示项目列表的教程，但我忘记了它并且不得不查看它以检查他们在那里是如何做到的。我所做的是 LandingComponent 显示的内容，好吧，我首先显示需要显示的所有内容的登录页面运行。

有没有办法绕过父路径？现在，'menuitem/:id' 或 'menuitem/create' 停在 MenuItemComponent。

着陆组件 html 如下所示；

<div class="grid-container">
    <div id="category-list">
        <app-category></app-category>
    </div>
    <div id="menu-item-list">
        <app-menu></app-menu>
    </div>
</div>

菜单项组件 html 是开始 <p>menu-item works!</p>

Answer 1

你可以去掉路径中的'menuitem'，这里不需要放路径

{路径：''，组件：MenuItemComponent，子组件：[]

//////////////// 组织你的路线

常量路线：路线=[

{path: 'home', component: LandingComponent},

{path: '', component: MenuItemComponent, children: [
    {path: 'create', component: MenuItemCreateComponent},
    {path: ':id', component: MenuItemDetailComponent}
]},

{path: 'cart', component: CartComponent}
{ path: '', 
  redirectTo: '/home', 
  pathMatch: 'full'},

];

Answer 2

经过一番思考，我想我找到了解决我的问题的最佳答案。由于拥有父路径会使事情变得更加复杂，因此我在常规路径之前制作了子路径，并且它按照我想要的方式工作。我的路由现在看起来像这样。

const routes: Routes = [
    {path: 'home', component: LandingComponent},
    {path: 'menuitem/create', component: MenuItemCreateComponent},
    {path: 'menuitem/:id', component: MenuItemDetailComponent},
    {path: 'cart', component: CartComponent},
    {path: '', redirectTo: '/home', pathMatch: 'full'}
];

有没有办法让父组件被跳过？

Is there a way to make the parent component be skipped?

routes

typescript

angular