Angular 5+Material侧边栏：如何默认触发首个mat-list-item点击？

我来帮你解决这个问题——要自动触发侧边栏里第一个有权限显示的导航项跳转，有两种实用思路，结合你的场景（用了*jhiHasAnyAuthority权限指令），我给你详细拆解：

方法一：通过DOM操作找到渲染后的第一个项并触发点击 #

这种方法直接从已渲染的DOM中获取可见的导航项，不需要额外维护配置数组，适合侧边栏项动态生成的场景。

步骤1：给导航列表加模板引用变量 #

先在模板里给mat-nav-list加一个引用标识，方便组件类获取：

<mat-sidenav-container>
  <mat-sidenav mode="side" opened="true">
    <mat-nav-list #navList>
      <a mat-list-item routerLink="path1" *jhiHasAnyAuthority="['ROLE1']">Item1</a>
      <a mat-list-item routerLink="path2" *jhiHasAnyAuthority="['ROLE2']">Item2</a>
      <!-- 更多导航项 -->
    </mat-nav-list>
  </mat-sidenav>
</mat-sidenav-container>

步骤2：在组件类中获取元素并触发操作 #

在组件的AfterViewInit钩子中（确保视图已完全渲染），查询所有实际显示的mat-list-item，找到第一个后要么模拟点击，要么直接路由跳转：

import { Component, ViewChild, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-your-sidebar', // 替换成你的组件选择器
  templateUrl: './your-sidebar.component.html'
})
export class YourSidebarComponent implements AfterViewInit {
  @ViewChild('navList') navList: ElementRef;

  constructor(private renderer: Renderer2, private router: Router) {}

  ngAfterViewInit(): void {
    // 获取所有已渲染的mat-list-item元素
    const visibleItems = this.navList.nativeElement.querySelectorAll('a.mat-list-item');
    
    if (visibleItems.length > 0) {
      // 方案A：模拟原生点击事件
      this.renderer.selectRootElement(visibleItems[0]).click();

      // 方案B：直接读取routerLink值跳转（更“Angular风格”，避免DOM依赖）
      // const firstRoute = visibleItems[0].getAttribute('routerLink');
      // if (firstRoute) {
      //   this.router.navigate([firstRoute]);
      // }
    }
  }
}

方法二：通过权限服务主动判断，直接路由跳转 #

这种方法不依赖DOM，而是利用*jhiHasAnyAuthority背后的权限服务，预先定义导航项的权限配置，找到第一个用户有权限访问的项后直接跳转，更符合Angular的组件逻辑。

步骤1：定义导航项配置数组 #

在组件类里维护一个和模板对应的导航项数组，包含路由和所需权限：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
// 假设你的权限服务是JhiAuthService，根据实际情况调整
import { JhiAuthService } from '../auth/jhi-auth.service';

@Component({
  selector: 'app-your-sidebar',
  templateUrl: './your-sidebar.component.html'
})
export class YourSidebarComponent implements OnInit {
  // 配置导航项：和模板中的项一一对应
  private sidebarItems = [
    { routerLink: 'path1', requiredAuthorities: ['ROLE1'] },
    { routerLink: 'path2', requiredAuthorities: ['ROLE2'] },
    // 更多导航项
  ];

  constructor(private authService: JhiAuthService, private router: Router) {}

  ngOnInit(): void {
    // 找到第一个用户有权限访问的导航项
    const firstAccessibleItem = this.sidebarItems.find(item => {
      return this.authService.hasAnyAuthority(item.requiredAuthorities);
    });

    // 如果找到就跳转
    if (firstAccessibleItem) {
      this.router.navigate([firstAccessibleItem.routerLink]);
    }
  }
}

两种方法的优缺点对比 #

• DOM操作法：优点是无需手动维护配置数组，适配动态生成的侧边栏；缺点是依赖Angular Material的DOM结构（比如a.mat-list-item选择器），如果组件样式或结构更新可能需要调整。
• 权限服务判断法：优点是逻辑更清晰，不依赖DOM，稳定性更高；缺点是需要保持配置数组和模板的同步，模板修改后要记得更新数组。

另外要注意：如果用户角色是动态变化的（比如登录后切换角色），你需要在角色变化时重新执行上述逻辑，比如监听权限服务的状态变化Observable。

内容的提问来源于stack exchange，提问作者user3161584