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>

Компонент admin:

<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 и вы нажимаете на routerLink с categories ты пойдешь в http://localhost:4200/admin/categories это то, что вы пытаетесь достичь здесь.

так что просто удалите / вот так... <a routerLink="dishes">dishes</a>

или, если хотите, можете использовать абсолютный путь.. <a routerLink="/admin/dishes">dishes</a>