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>

请

links 需要像：

http://localhost:4200/admin/categories

但是Angular给我在link:

http://localhost:4200/categories

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

Answer 1

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

angular中有两种路径 相对路径和绝对路径

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

现在 相对路径 categories 只会将其添加到您当前所在的路径中，因此如果您在 http://localhost:4200/admin 上并单击 routerLink 和 categories 你会去 http://localhost:4200/admin/categories 这就是你在这里想要达到的目标。

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

或者如果您愿意，可以使用绝对路径.. <a routerLink="/admin/dishes">dishes</a>

Angular 5 routerLink 不能正常工作

Angular 5 routerLink doesn't work correctly

routerlink

angular

请