如何在 Mat-Toolbar 中选择单击的链接

Question

据我所知（来自引导导航栏），在 header 上，我们需要使用routerLinkActive="active"来使任何点击的元素都被选中。我尝试为 Material Toolbar 实现相同的逻辑但失败了。还检查了其他可能的解决方案，例如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>

文档