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

【问题标题】：item menu: define a routerlink active by default when launching the applicationitem menu：定义启动应用程序时默认激活的routerlink
【发布时间】：2021-07-27 03:30:46
【问题描述】：

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

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

我该怎么做？谢谢

【问题讨论】：

标签： angular menu routerlinkactive

【解决方案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 后，导航到数组中的第一个 routerlink

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

【讨论】：