如何更改Angular 4导航栏中的routerlink？答案

【问题标题】：How to change the routerlink in nav bar in Angular 4?如何更改Angular 4导航栏中的routerlink？
【发布时间】：2017-12-16 22:31:42
【问题描述】：

我遇到了路由到错误路由链接的问题。如何避免这种情况？对不起，我是菜鸟。

我从 Chrome 控制台得到的错误是

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL 
Segment: 'oadmin/add-new-student/add-new-teacher'
Error: Cannot match any routes. URL Segment: 
'oadmin/add-new-student/add-new-teacher'

导航按钮的HTML代码

<md-toolbar color="primary" class="toolbar-student">  
<span >
    <button md-button [mdMenuTriggerFor]="menu1">Student</button>
    <md-menu #menu1="mdMenu">
      <button md-menu-item [routerLink]="['add-new-student']" >Add New Student</button>
      <button md-menu-item>Item 2</button>
    </md-menu>
  </span>
  <span >
    <button md-button [mdMenuTriggerFor]="menu2">Teacher</button>
    <md-menu #menu2="mdMenu">
      <button md-menu-item [routerLink]="['add-new-teacher']" >Add New Teacher</button>
      <button md-menu-item>Item 2</button>
    </md-menu>
  </span>
</md-toolbar>

我的路线

var routes = [
  {path: '',
  component: StudentComponent},
  {path: 'oadmin',
  component: OAdminComponent},
  {path: 'oadmin/add-new-student',
  component: NewStudentComponent},
  {path: 'oadmin/add-new-teacher',
  component: NewTeacherComponent},
];

导航栏对两条路线都很常见。当我在“添加新学生”路线内单击“添加新教师”路线时，我收到此错误。反之亦然。如何避免这种情况？

【问题讨论】：

另一个编辑等待批准，但请删除 angularjs 标签，因为它适用于 angular1x 项目

标签： javascript angular url routes

【解决方案1】：

当您在oadmin/add-new-student 路径内并重定向到add-new-teacher 时，您实际上被重定向到oadmin/add-new-student/add-new-teacher，因为编写[routerLink]="['add-new-teacher']" 只是将/add-new-teacher 附加到当前url。相反，您想要的是重定向到oadmin/add-new-teacher，而不是：

[routerLink]="['add-new-teacher']"

你应该使用这个：

routerLink="/oadmin/add-new-teacher"

您还应该为 add-new-student 更改它，就像您访问 add-new-teacher 并单击 add-new-student 链接一样，您将遇到相同的错误

<button md-menu-item routerLink="/oadmin/add-new-student" >Add New Student</button>

【讨论】：

【解决方案2】：

在 angular 4 而不是相对路径中，您需要根据 index.html 页面上的基本 href 提及完整路径试试

[routerLink]="['/oadmin/add-new-teacher']"

【讨论】：

感谢您的解释