如何以角度处理多个链接上的路由答案

【问题标题】：How to handle route on multiple links in angular如何以角度处理多个链接上的路由
【发布时间】：2021-08-09 23:23:18
【问题描述】：

我有一个带有以下导航链接的侧边栏，这些链接位于名为“登录”的子模块内。因此，当我单击教室时，它指向登录/教室，这是正确的，但是当我单击作业时，它正在将作业添加到活动 url，即登录/教室/作业。我需要它是登录/分配而不是附加到当前 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 }

【问题讨论】：

标签： angular typescript routes angular8 url-routing

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：

ClassRoom 工作！谢谢:-)