Angular 5 routerLink 无法正常工作答案

【问题标题】：Angular 5 routerLink doesn't work correctlyAngular 5 routerLink 无法正常工作
【发布时间】：2018-03-20 22:43:15
【问题描述】：

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

路由模块：

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

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

【问题讨论】：

从管理组件中的 routerLinks 中删除 /
我建议通过angular.io/guide/router 运行，尤其是在绝对链接和相对链接上
并维护 1 个路由器插座。

标签： angular routerlink

【解决方案1】：

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

角度有两种类型的路径 相对路径和绝对路径

所以 绝对路径 看起来像这样 /admin/categories 请注意开头的 / 这意味着它将从 index.html 中指定为 @987654323 的根路径开始路径@

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

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

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

【讨论】：

我明白了。谢谢！