Question

将接受任何javascript解决方案，但最佳答案可能是使用angular2

我正在尝试根据api调用动态创建导航栏。

问题是如果另一个li（子）处于活动状态，我希望父li具有活动类。

以下代码符合我的要求，但不会动态加载

 <nav>
                <ul>
                    <li>
                        <a (click)="togglePatientSideSearch()"><i class="fa fa-lg fa-fw fa-search"></i> <span class="menu-item-parent">Patient Search</span></a>
                    </li>
                    <li data-nav-target="1" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: false }">
                        <a  (click)="toggleNavMenuParentSelected(1)" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Payroll</span>
                        <b class="collapse-sign">
                            <em class="fa fa-plus-square-o"></em>
                            </b>
                        </a>
                        <ul>
                            <li [routerLinkActive]="['active']">
                                <a [routerLink]="['/payroll/summary']" title="Payroll Summary"><span class="menu-item-parent">Summary</span></a>
                            </li>
                            <li [routerLinkActive]="['active']">
                                <a [routerLink]="['/payroll/daily']" title="Payroll Daily"><span class="menu-item-parent">Daily</span></a>
                            </li>
                        </ul>
                    </li>
</nav>

下面的代码是我尝试修复的无法解决的问题！

<nav>
            <ul *ngIf="navigationMenu">
                <li *ngFor="let nav of navigationMenu; let i = index;" [attr.data-nav-target]="nav.logo && !nav.children ? null : i" [attr.routerLinkActiveOptions]="nav.logo && !nav.children ? null : { exact: false }" [attr.routerLinkActive]="nav.logo && !nav.children ? null : ['active']" >
                    <a *ngIf="nav.logo && !nav.children" (click)="navigationClicked(nav)"><i class="{{nav.logo}}"></i> <span class="menu-item-parent">{{nav.name}}</span></a>
                    <a *ngIf="nav.logo && nav.children" (click)="toggleNavMenuParentSelected(i)" title="Dashboard">
                        <i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">{{nav.name}}</span>
                        <b class="collapse-sign">
                            <em class="fa fa-plus-square-o"></em>
                        </b>
                    </a>
                    <ul *ngIf="nav.children">
                        <li [routerLinkActive]="['active']" *ngFor="let child of nav.children;">
                            <a [routerLink]="['/home']" title="Home"><span class="menu-item-parent">{{child.name}}</span></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

我在一个名为navigationMenu的对象中同时加载整个导航栏。 以下是我希望它与动态加载时的内容相比！（忽略不同的名称）

Answer 1

您可以使用：

[routerLinkActiveOptions]="{ exact: true }"

与您：

routerLinkActive="active"

我找到了适合我的解决方案：

https://github.com/angular/angular/issues/8397

RouterLinkActive在ngFor中工作

1 个答案: