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

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 }

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

只需像这样<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