子节点和父节点的 routerLinkActive 路由答案

【问题标题】：routerLinkActive route for child and parent子节点和父节点的 routerLinkActive 路由
【发布时间】：2023-03-26 00:47:01
【问题描述】：

我正在尝试使用以下代码为我的菜单栏应用或突出显示导航路线，我可以得到的是，我可以突出显示子菜单，但无法突出显示父菜单栏。

<li class="nav-item dropdown"><a
                        class="nav-link dropdown-toggle " id="navbarDropdownMenuLink"
                        data-toggle="dropdown" style="color: white; cursor: pointer;"
                        [routerLinkActive]="['class1']">Parent</a>
                        <div class="dropdown-menu dropdown-menu-left"
                            aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" 
                                [routerLink]="['app-child1']"
                                [routerLinkActive]="['class1']"
                                >Child 1</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" 
                                [routerLink]="['app-child2']"
                                [routerLinkActive]="['class1']"
                                >Child 2</a>
                        </div>
</li>

Css 类：

.class1{
    background-color: #007bff;
}

【问题讨论】：

你在哪里应用class1类？
您可以检查活动路线吗？然后相应地应用课程？

标签： angular angular-routerlink

【解决方案1】：

要突出显示侧边菜单链接，只需将 routerLinkActive="cssClassName" 添加到锚元素，例如：

<a routerLink="/profile" routerLinkActive="cssClassName">Profile</a>
<a routerLink="/profile/details" routerLinkActive="cssClassName">Profile Details</a>

如果路由变为 /profile 或 /profile/details，这将突出显示两个链接
在这种情况下，如果您不想在用户选择配置文件详细信息时突出显示父路由，则只需向父路由添加一个附加属性，即“routerLinkActiveOptions”，如下所示：

<a routerLink="/profile" routerLinkActive="cssClassName"
            [routerLinkActiveOptions]="{ exact: true }">Profile</a>

这是在激活时突出显示侧菜单链接的简单方法。

【讨论】：

【解决方案2】：

您可以使用模板引用变量 (#) 来获取对routerLinkActive 及其属性的引用，然后使用isActive。

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" 
        id="navbarDropdownMenuLink"
        data-toggle="dropdown" 
        style="color: white; cursor: pointer;"
        [ngClass]="{'class1': child1RLA.isActive || child2RLA.isActive}">  <!-- <-- Check if child routes are active -->
            Parent
    </a>
    <div class="dropdown-menu dropdown-menu-left"
        aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" 
                [routerLink]="['app-child1']"
                [routerLinkActive]="['class1']"
                #child1RLA="routerLinkActive">          <!-- <-- Assign routerLinkActive reference to child1RLA variable -->
                    Child 1
            </a>
            <div class="dropdown-divider"></div>
                <a class="dropdown-item" 
                    [routerLink]="['app-child2']"
                    [routerLinkActive]="['class1']"
                    #child2RLA="routerLinkActive">      <!-- <-- Assign routerLinkActive reference to child2RLA variable -->
                        Child 2
                </a>
            </div>
    </div>
</li>

【讨论】：

什么？它不是“角度 id”。它是模板引用变量。那么如何使用exportAs of 指令呢？那么我该如何在我的项目中使用这种精确的方法呢？
stackoverflow.com/questions/49746274/…
blog.angularindepth.com/…
它不是指令？可能出于同样的原因人们在 Angular 项目中使用 jquery。仅仅因为你可以做某事，并不意味着你应该
“不是指令”是什么意思？ RouterLinkActive 是一个 directive，它具有 exportAs: 'routerLinkActive'，您可以使用它来访问其特定于指令的属性。阅读官方文档中的examples。

【解决方案3】：

只需将 routerLinkActive 放在父元素上，如下所述：https://angular.io/api/router/RouterLinkActive#description

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

【讨论】：