#angular #menu #routerlinkactive
Вопрос:
Все это в названии, я бы хотел, чтобы первый пункт моего меню был выполнен в «основном» стиле углового материала. Вот мой код, который работает только тогда, когда я нажимаю на пункт меню
<div class="menu">
<div *ngFor="let itemFooterMenu of itemsFooterMenu; let indexItem = index">
<a routerLink="{{ itemFooterMenu.utilRoute }}" routerLinkActive #rla="routerLinkActive" >
<button class="mat-raised-button" mat-raised-button [color]="rla.isActive ? 'primary' : ''">
<div>
<mat-icon [color]="rla.isActive ? '' : 'primary'">{{ itemFooterMenu.matIcon }}</mat-icon>
</div>
</button>
</a>
</div>
</div>
Как я могу это сделать ? Спасибо
Ответ №1:
HTML
<div class="menu">
<div *ngFor="let itemFooterMenu of itemsFooterMenu; let indexItem = index;" >
<a routerLink="{{ itemFooterMenu.utilRoute }}" routerLinkActive="active" #rla="routerLinkActive">
<button class="mat-raised-button" mat-raised-button [color]="rla.isActive ? 'primary' : ''">
<div>
<mat-icon [color]="rla.isActive ? '' : 'primary'">{{ itemFooterMenu.matIcon }}</mat-icon>
</div>
</button>
</a>
</div>
</div>
тс
constructor(private router: Router) {
}
После загрузки значений в подменю itemsFooterMenu перейдите к первой ссылке маршрута в массиве
this.router.navigate([this.itemsFooterMenu[0].utilRoute]);