如何在Angular中将导航栏用户头像设为带RouterLink的跳转链接

方法1：用<a>标签包裹（语义化优先） #

这是最符合HTML语义的做法，把头像放在带routerLink的链接标签里，还能顺便添加当前活跃状态的样式：

<a [routerLink]="['/你的目标组件路由']" routerLinkActive="active-nav">
  <img [ngSrc]="User.photoUrl || './assets/images/default.png'" alt="user image" height="40" width="40" priority>
</a>

• 把['/你的目标组件路由']替换成你实际要跳转的组件路由，比如用户中心就写['/user-center']
• 如果需要传递参数（比如用户ID），改成['/user-center', User.id]即可
• routerLinkActive="active-nav"是可选配置，用来给当前选中的导航项添加样式，active-nav是你自定义的CSS类名

方法2：直接给图片加routerLink指令 #

Angular支持在任意元素上使用routerLink指令，直接给img标签添加也能实现跳转，只是语义化稍弱：

<img [ngSrc]="User.photoUrl || './assets/images/default.png'" 
     alt="user image" 
     height="40" 
     width="40" 
     priority
     [routerLink]="['/你的目标组件路由']">

关键注意点 #

1. 确保项目已正确配置RouterModule，且目标组件的路由已在路由配置数组中定义
2. 将原来的ngSrc="{{}}"改成[ngSrc]=""的属性绑定形式，这是Angular的最佳实践，能避免插值表达式的潜在问题
3. 如果需要在跳转后的组件中获取参数，要在目标组件里注入ActivatedRoute来读取参数

内容的提问来源于stack exchange，提问作者3bdallah-Oi