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

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

您的情况不需要 children。你的路线必须这样定义：

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

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

只需像这样更改卡的 link <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

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

Angular route. Problem with route between two view

routing

router

routes

angular