Angular中根据Observable动态切换routerLink，能否用单个<a>标签实现？

你可以直接通过属性绑定[routerLink]配合三元表达式，把两个<a>标签合并成一个，无需用*ngIf控制显示隐藏。

实现代码 #

<a class="navbar-brand"
   [routerLink]="(accountService.currentUser$ | async) ? '/members' : '/'"
   routerLinkActive="active">XXXX</a>

说明 #

• 利用async管道自动处理currentUser$这个Observable的订阅与退订，无需手动管理订阅生命周期
• 通过三元表达式(currentUser ? 登录路由 : 未登录路由)，根据用户登录状态动态切换routerLink的目标地址
• 保留原有的routerLinkActive属性，确保激活状态的样式正常生效

如果担心多次触发Observable订阅（比如模板中多处使用async管道），可以用ng-container缓存异步结果，再复用这个变量：

<ng-container *ngIf="accountService.currentUser$ | async as currentUser">
  <a class="navbar-brand"
     [routerLink]="currentUser ? '/members' : '/'"
     routerLinkActive="active">XXXX</a>
</ng-container>

原来的方案用两个*ngIf分开控制显示，本质是重复渲染相同结构的标签，合并后不仅减少冗余代码，还能避免不必要的DOM切换。

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