Question

嗨，我是Angular的初学者，我在应用程序中遇到路由问题。我想要带餐厅的城市。

{ path: 'city', component: City1Component, children: [
{ path: 'restaurant', component: WenecjaComponent },
] },

在结果视图中，餐厅处于城市景观。（图像出现问题）： https://ibb.co/82yW1NR

显示：localhost：4200 / city / restaurant，但餐厅视图显示在城市视图中。

router-outlet在routerlinks下的component.html中

在点击卡片后，我只想将我移到餐厅的视野。卡片是2个带文字的盒子。有人可以帮我吗？

Answer 1

您不需要生孩子。您的路线必须这样定义：

{ path: 'city', component: City1Component },
{ path: 'restaurant', component: WenecjaComponent }

<router-outlet></router-outlet>上的app.component.html就足够了。

只需像这样<a [routerLink]="['/restaurant']">那样更改卡的链接，即可从城市更改为餐厅。

如果您需要城市和餐厅之间的联系。您需要在路由中添加另一个组件来处理案例localhost/city/[empty]。

像这样，您将拥有以下路线：

localhost/city/[empty]和
localhost/city/restaurant

为此，您还需要像这样更改路线：

{
  path: 'city',
  component: City1Component,
  children: [
     { path: '', component: [component to create] },
     { path: 'restaurant', component: WenecjaComponent },
  ]
}

有关更多信息：https://angular.io/guide/router#child-route-configuration

角路线。两个视图之间的路线问题

1 个答案: