我有一个自举4导航栏有一个下拉菜单,在下拉菜单中包含的路线,我可以得到那些基于“routerLinkActive”出现活跃,但我也想风格的“下拉菜单,切换”或“导航项目”为活动时它的一个子是活动的路线。
我将如何去这样做呢?
这里是代码的一个小片段,我试图把它清理干净为了便于阅读
<li *ngFor="let menuItem of MenuItems; index as i" [id]="i" class="nav-item dropdown" ngbDropdown>
<a class="nav-link dropdown-toggle" ngbDropdownToggle>
{{menuItem.title}}
</a>
<!-- dropdown menu -->
<div *ngIf="menuItem.submenu.length > 0" class="dropdown-menu" ngbDropdownMenu aria-labelledby="i">
<div *ngFor="let menuSubItem of menuItem.submenu">
<a [routerLink]="menuSubItem.path"
[routerLinkActive]="['active-sub']" <== ** this part works and sets the class, now i need the top nav-link to be active too
[routerLinkActiveOptions]="{exact: true}"
class="dropdown-item">
{{menuSubItem.title}}
</a>
</div>
</div>
</li>
您可以使用routerLinkActive
这样的模板参考:
<li [ngClass]="{'active-class': rlRef.isActive}">
<a [routerLink]="['/your-route']" routerLinkActive="active" #rlRef="routerLinkActive">Fancy URL</a>
<li>