Question

我有一个html文件如下。

 <ul class="nav side-menu">
                <li routerLinkActive="active">
                  <a routerLink="Teachers/AllTeachers">
                    Teachers 
                  </a>
                </li>
 </ul>

在这个html文件中，即在teacher.component.ts中，我将重定向到所有教师组件，如上所示。在我的app.routing.ts中，我的路线如下。

    const routes: Routes = [
        { path: '', component: LoginComponentComponent },
        {
            path: 'Dashboard', component: SidebarComponent, canActivate: [OnlyLoggedInGuard],
            children: [
                { path: 'Teachers/AllTeachers', component: AllTeachersComponent},
                { path: 'Teachers/AddTeacher', component: AddTeacherComponent},
]
},

现在我必须从所有教师导航，从所有教师组件中添加教师。我是通过单击另一个按钮来完成的。但是在执行此操作时，路由器链接处于活动状态不起作用它不会将活动类应用于html。我需要保持li活动，只要它在教师中就可以了。

Answer 1

Code example更新了@Bahman代码示例。只需将allprojects { repositories { google() mavenCentral() jcenter() } }添加到routerLink指令即可。

routerLinkActive="active"

<ul class="nav side-menu" routerLinkActive="active"> <li> <a routerLink="/Dashboard/Teachers/AllTeachers" > All Teachers </a> </li> ... </ul>指令应与routerLinkActive：

一起使用

routerLink

CODE EXAMPLE 3

Answer 2

以下是我为您创建的示例：

https://stackblitz.com/edit/angular-gx5ovm

我认为诀窍是将routerLinkActive =“active”移动到父级ul而不是li。如果你想在li元素上使用它，那么你必须在每个li元素上放置routerLinkActive =“active”。

这是来自Angular文档：

您可以将RouterLinkActive指令应用于a的祖先 RouterLink。
<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

https://angular.io/api/router/RouterLinkActive#description

<强>更新：这就是你要追求的吗？

https://stackblitz.com/edit/angular-hvnczx

Answer 3

使用应使用相对路径，以使Angular知道它是相对路径，如下面的代码所示：

              <a routerLink="./AllTeachers">

如何将routelink active添加到子路由

3 个答案: