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

#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]);