时间戳

首页 > 解决方案 > 当子路由器链接在角度 5 中单击时如何为父级添加活动类

angular - 当子路由器链接在角度 5 中单击时如何为父级添加活动类

问题描述

嗨，我有以下 html 代码

    <li class="" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/home']">my first tab</a></li>


        <li [class.active]="rla?.isActive"  routerLinkActive="active"><a class="pointer">my second tab</a>

                    <ul>
                        <li class="" #rla="routerLinkActive" routerLinkActive="active" ><a [routerLink]="['/myFirstLink','rock']">Past</a></li>
                        <li class="" #rla="routerLinkActive" routerLinkActive="active" ><a [routerLink]="['/myFirstLink','aj']">Upcoming</a></li>
                    </ul> 

     </li>
</li>

路径是

{
        path: "myFirstLink/:param",
        loadChildren: ".....
}

那么如何在不使用 jquery 的情况下单击 myFirstLink 时为我的第二个选项卡添加活动类？，我的代码不起作用

标签： angular

解决方案

routerLinkActive仅当您尝试路由任何组件时才有效-我没有看到您正在尝试通过单击第二个选项卡来路由到任何组件，因此请routerLinkActive从中删除

当您单击第二个选项卡的子选项卡时动态地将活动添加到第二个选项卡 - 我会告诉您动态添加的解决方案 - 您需要知道何时单击子选项卡以便将(click)事件绑定到它

`<li routerLinkActive="active" >
   <a [routerLink]="['/myFirstLink','rock']" (click)='addClass = true'>Past</a>
</li>
<li routerLinkActive="active">
   <a [routerLink]="['/myFirstLink','aj']" (click)='addClass = true'>Upcoming</a>
</li>`

addClass将是您的属性component.ts值false，当单击子组件时，它将成为现实，现在最终将此属性添加到您的父选项卡

<li [class.active]="addClass"><a class="pointer">my second tab</a>

希望这会起作用 -addClass如果未选择属性，请将其更改为 false - 不是正式的工作方式，但似乎是一种解决方法。

快乐编码！

推荐阅读