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>

当我点击 restaurant.component.html 文件中的 link 之一时，它试图将我发送到的 link 是 localhost:4200\restaurantlist\restaurantdetail。我不想要这个，我希望它将我发送到 localhost:4200\restaurantdetail，因为这是我设置 django url 的方式。为什么它会继承 url 的 restaurantlist 部分（好像它是该组件的子视图或其他东西），我该如何摆脱它？它与我如何为 restaurantlist 组件定义 links 有什么关系吗：

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

欢迎任何意见。

Answer 1

尝试在路线前添加“/”

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

Answer 2

一条路线没有 /是一条相对路线，意思是你'dive deeper'进入一条路线。

localhost/main -> 路由到 list -> localhost/main/list -> 路由到 detail -> localhost/main/list/detail

路线与 / 是一条绝对路线，意味着您想准确地到达那里。

localhost/main -> 路由到 /list -> localhost/list -> 路由到 /detail -> localhost/detail。

如果您在列表页面上，您可以路由到 detail，但如果您在主页上并且想要查看详细信息，则必须使用 /main/list/detail 或 list/detail .

Url Angular 中的路径构造

Url path construction in Angular

angular

url

routing