时间戳

首页 > 解决方案 > item menu：定义启动应用程序时默认激活的routerlink

angular - item menu：定义启动应用程序时默认激活的routerlink

问题描述

这一切都在标题中，我希望我的菜单的第一项采用“主要”风格的棱角材料。这是我的代码，仅在我单击菜单项时才有效

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

我怎样才能做到这一点 ？谢谢

标签： angularmenurouterlinkactive

解决方案

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>

TS

constructor(private router: Router) {
}

将值加载到 itemsFooterMenu 后，导航到数组中的第一个 routerlink

this.router.navigate([this.itemsFooterMenu[0].utilRoute]);

推荐阅读