Angular 中的 URL 路径构建

Question

I am using Angular 8 and Django 3. I do not understand the way that my url path is being built in Angular. I have a restaurantlist component and a restaurantdetail component with the following paths in my app-routing-module.ts :

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

In my restaurantlist.component.html file:

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

When I go to click on one of the links in my restaurant.component.html file, the link that it tries to send me to is localhost:4200\\restaurantlist\\restaurantdetail\\2 . I dont want this, I want it to send me to localhost:4200\\restaurantdetail\\2 , since this is how I have my django urls set up. Why does it inherit the restaurantlist part of the url (as if its a child view of this component or something) and how can I get rid of it? Does it have something to do with how I define my links for to the restaurantlist component:

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

Any input is appreciated.

Answer 1

A route without the / is a relative route, meaning you 'dive deeper' into a route.

localhost/main -> route to list -> localhost/main/list -> route to detail -> localhost/main/list/detail

A route with the / is an absolute route meaning you want to go exactly there.

localhost/main -> route to /list -> localhost/list -> route to /detail -> localhost/detail.

If you are on the list page you can route to detail but if you are on the main page and want to go to detail you have to use /main/list/detail or list/detail .

Answer 2

尝试在路由前添加“/”

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