如何在垫子工具栏中选择单击的链接

Question

据我所知(从引导导航栏(，在标题上，我们需要使用routerLinkActive="active"使任何单击的元素都处于选中状态。我尝试为材质工具栏实现相同的逻辑，但失败了。还检查了其他可能的解决方案，例如routerLinkActive="primary" etc但也失败了。

这是我下面的工具栏的HTML

<mat-toolbar color="primary">
<div fxHide.gt-xs>
<button mat-icon-button routerLink="/settings">
<mat-icon>build</mat-icon>
</button>
<button mat-icon-button routerLink="/">
<mat-icon>home</mat-icon>
</button>
</div> 
<div fxFlex fxLayout fxHide.xs>
<ul fxLayout fxLayoutGap="10px" class="navigation-items">
<li routerLinkActive="active"><a routerLink="/settings" >Settings</a></li>
<li routerLinkActive="active"><a style="cursor:pointer" routerLink="/">Home</a></li>                   
</ul>
</div>
<div fxFlex fxLayout fxLayoutAlign="flex-end">
<ul fxLayout fxLayoutGap="10px" class="navigation-items">
<li>Weather</li>
</ul>
</div> 
</mat-toolbar>

Answer 1

你的模板中有一些错误

<ul fxLayout fxLayoutGap="10px" class="navigation-items">
<li><a routerLinkActive="active" routerLink="/settings" >Settings</a></li>
<li><a style="cursor:pointer" routerLinkActive="active" routerLink="/">Home</a></li>                   
</ul>

Answer 2

在路由器插座上，我们可以使用这样的出口指令获取模板引用

<router-outlet #o="outlet"></router-outlet>

然后，您可以使用模板引用来获取路由路径。使用它，您可以动态设置 ngClass

<ul fxLayout fxLayoutGap="10px" class="navigation-items">
<li [ngClass]="{o?.isActivated && o.activatedRoute.routeConfig.path === '' : 'active'} "><a style="cursor:pointer" routerLink="/">Home</a></li>         
</ul>

文档