Как сделать выделение по нажатой ссылке в Mat-Toolbar - PullRequest
Новая
       6

Как сделать выделение по нажатой ссылке в Mat-Toolbar

0 голосов
/ 24 сентября 2019

Насколько я знаю (из загрузочной панели навигации), в заголовке нам нужно использовать 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>

Ответы [ 2 ]

0 голосов
/ 24 сентября 2019

На выходе маршрутизатора мы можем получить ссылку на шаблон, используя следующую директиву выхода: 

<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>

Документация

0 голосов
/ 24 сентября 2019

В вашем шаблоне есть несколько ошибок 

 <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>
...