如何在 angular 中处理多个链接上的路由

Question

我有一个带有下方导航链接的边栏，这些链接位于名为“登录”的子模块中。因此，当我点击教室时，它指向 login/classroom，这是正确的，但是当我点击作业时，它会将作业添加到活动 url，即 login/classroom/作业。我需要它是 login/assignments 而不是附加到当前 url。怎么实现。

 **component.html**

 <div class="profileimg"></div>
 <span class="user">{{username}}</span>
 <a [routerLink]="'classroom'">ClassRoom</a>
 <a [routerLink]="'assignments'">Assignments</a>
 <a [routerLink]="'scores'">Scores</a>
 <a [routerLink]="'myprofiles'">My Profiles</a>
  
 router.module.ts
  { path: '', component: AfterloginComponent },
  { path: 'classroom' ,component: ClassroomComponent },
  { path: 'assignments', component: AssignmentsComponent },
  { path: 'scores', component: ScoresComponent }

Answer 1

如果这些 link 位于作为根模块一部分的组件中，则只需在 link 前加上正斜杠并使用完整路径即可使用绝对路径。

<a [routerLink]="'/login/classroom'">ClassRoom</a>

这种方法的缺点是，如果它与子模块内的组件一起使用，则会降低该模块的灵活性。这将强制任何导入它的模块指定它的路径始终是 /login.

如果 link 位于子模块中的组件中，并且您知道它将仅用于 RouterModule 中指定的那些组件，则在 link 前面加上 ../，这将使 link 全部相对于它们的共享父级。

<a [routerLink]="'../classroom'">ClassRoom</a>

如果您需要更多的灵活性，例如带有 link 的组件可以在子模块和父模块中使用，那么您必须将基本路由作为输入传递给组件并将其作为路由器命令数组的一部分包含在内：

<a [routerLink]="[baseRoute, 'classroom']">ClassRoom</a>

如何在 angular 中处理多个链接上的路由

How to handle route on multiple links in angular

angular

typescript

routes

angular8

url-routing