Построение пути URL в Angular

Question

Я использую Angular 8 и Django 3. Я не понимаю, как мой URL-путь строится в Angular. У меня есть restaurantlist компонент и restaurantdetail компонент со следующими путями в моем app-routing-module.ts:

const routes: Routes = [
  {path:'restaurantlist', component:RestaurantlistComponent},
  {path:'restaurantdetail/:id', component:RestaurantViewComponent}
];

В моем restaurantlist.component.html файле:

<h2>List of Restaurants</h2>
<ul *ngFor = "let restaurant of restaurants">
<a [routerLink]="['restaurantdetail', restaurant.id]">{{restaurant.name}}</a>  
</ul>

Когда я go чтобы щелкнуть по одной из ссылок в моем файле restaurant.component.html, ссылка, на которую он пытается отправить меня, - localhost:4200\restaurantlist\restaurantdetail\2. Я не хочу этого, я хочу, чтобы он отправил меня на localhost:4200\restaurantdetail\2, так как я настроил свои django URL-адреса. Почему он наследует restaurantlist часть URL (как будто это дочерний вид этого компонента или чего-то еще) и как я могу от него избавиться? Имеет ли это какое-то отношение к тому, как я определяю свои ссылки для компонента restaurantlist:

<a [routerLink]="'/restaurantlist'">See Available Restaurants</a>

Любой вклад приветствуется.

Answer 1

Маршрут без / - это относительный маршрут, означающий, что вы «углубляетесь» в маршрут.

localhost / main -> маршрут к list -> localhost / main / list -> маршрут к detail -> localhost / main / list / detail

Маршрут с / - это абсолютный маршрут, означающий, что вы хотите go именно там.

localhost / main -> маршрут к /list -> localhost / list -> маршрут к /detail -> localhost / detail.

Если вы находитесь на странице списка, вы можете направить на detail, но если вы находитесь на главной странице и хотите go для подробностей, вы должны использовать /main/list/detail или list/detail.

Answer 2

Попробуйте добавить '/' перед маршрутом

<a [routerLink]="['/restaurantdetail', restaurant.id]">{{restaurant.name}}</a>