Angular 5 routerLink 无法正常工作

Question

有一个包含所有组件的模块和一个路由模块。

路由模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';
import { AdminComponent } from './admin/admin.component';
import { AdminDishesComponent } from './admin/adminDishes/adminDishes.component';
import { AdminCategoriesComponent } from './admin/adminCategories/adminCategories.component';

const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'user'
  },
  {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      {
        path: 'dishes',
        component: AdminDishesComponent
      },
      {
        path: 'categories',
        component: AdminCategoriesComponent
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  declarations: [],
  exports: [
    RouterModule
  ]
})

export class RoutingModule { }

根组件：

<a routerLink="/admin">Admin control panel</a>
<router-outlet></router-outlet>

管理组件：

<ul id="leftMenu">
  <li><a routerLink="/dishes">Dishes</a></li>
  <li><a routerLink="/categories">Categories</a></li>
</ul>
<div id="adminContent">
  <router-outlet></router-outlet>
</div>

请

链接需要像：

http://localhost:4200/admin/categories

但是 Angular 在链接中给了我：

http://localhost:4200/categories

如果我在地址栏中输入我需要的地址，一切正常。

Answer 1

所以这是一个简单的错误..

角度相对路径和绝对路径有两种 路径

所以绝对路径看起来像这样/admin/categories注意/开头，这意味着它将从 index.html 中指定的根路径开始路径<base href="/">

现在，相对路径 categories只会将其添加到您当前所在的路径中，因此如果您打开http://localhost:4200/admin并单击 a routerLinkwithcategories您将转到http://localhost:4200/admin/categories您要在这里实现的目标。

所以只需删除/像这样......<a routerLink="dishes">dishes</a>

或者如果你喜欢你可以使用绝对路径.. <a routerLink="/admin/dishes">dishes</a>