如何在Angular 4的導航欄中更改routerlink？

Question

我遇到了路由到錯誤的路由鏈接的問題。 如何避免這種情況？ 很抱歉成為菜鳥。

我從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},
];

導航欄在兩條路線中都是通用的。 當我在“添加新學生”路線內時單擊“添加新教師”路線時，出現此錯誤。 反之亦然。 如何避免這種情況？

Answer 1

當您在oadmin/add-new-student路徑內並重定向到add-new-teacher時，實際上您已被重定向到oadmin/add-new-student/add-new-teacher因為編寫[routerLink]="['add-new-teacher']"只是將/add-new-teacher附加到當前網址。 相反，您想要的是重定向到oadmin/add-new-teacher ，而不是：

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

您應該使用此：

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

並且您還應該為添加新學生更改它，就像您訪問添加新老師並單擊添加新學生鏈接一樣，您將遇到相同的錯誤

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

Answer 2

在angular 4中，您需要根據index.html頁面上的base href提及完整路徑，而不是相對路徑

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