项目菜单：定义启动应用程序时默认激活的路由器链接

Question

都在标题里了，我希望我的菜单的第一项拿 'primary' 风格 angular material。这是我的代码，仅当我单击菜单项时才有效

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

我该怎么做？谢谢

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

TS

constructor(private router: Router) {
}

将值加载到 itemsFooterMenu 后，导航到数组中的第一个路由器链接

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

项目菜单：定义启动应用程序时默认激活的路由器链接

item menu: define a routerlink active by default when launching the application

menu

routerlinkactive

angular