Question

嗨，我有以下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时如何为我的第二个选项卡添加活动类？，我的代码不起作用

Answer 1

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-不是正式的工作方法，但似乎是一种解决方法。

快乐编码！

Answer 2

因此，如果您需要在子级处于活动状态时将其设置为父级， [routerLink]="['/home']"更改为[routerLink]="['/myFirstLink']"

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

2 个答案: