Question

据我所知（从引导程序导航栏），在标题上，我们需要使用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>

然后，您可以使用模板ref获取路由路径。使用它可以动态设置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>

Documentation

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

2 个答案: