Angular 5：从HTML调用方法切换登录/登出链接失效问题排查

嘿，这个问题我之前也踩过坑，来帮你捋一捋！

你遇到的问题大概率是Angular变更检测机制和**[hidden]指令的局限性**导致的。虽然控制台显示authenticated()返回true，但模板里的绑定没及时更新，或者[hidden]被CSS优先级覆盖了。给你几个靠谱的解决办法：

1. 优先用组件属性替代方法绑定 #

把认证状态存成组件里的布尔属性，而不是每次变更检测都调用方法。这样不仅性能更好，视图更新也更可靠：

组件代码： #

// 定义一个属性跟踪认证状态
isAuthenticated: boolean = false;

// 登录成功后更新状态
handleLogin() {
  // 你的登录逻辑...
  this.isAuthenticated = true;
}

// 登出后更新状态
handleLogout() {
  // 你的登出逻辑...
  this.isAuthenticated = false;
}

模板代码： #

<ul class="nav navbar-nav navbar-right">
  <!-- 登出链接：认证后显示 -->
  <li class="nav-item dropdown" [hidden]="!isAuthenticated">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <i class="fa fa-user" aria-hidden="true"></i> 账号
      <span class="caret"></span>
    </a>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" (click)="handleLogout()">登出</a>
    </div>
  </li>
  <!-- 登录链接：未认证时显示 -->
  <li class="nav-item" [hidden]="isAuthenticated">
    <a class="nav-link" (click)="handleLogin()">登录</a>
  </li>
</ul>

2. 改用*ngIf替代[hidden]（更可靠） #

[hidden]本质是通过添加display: none来隐藏元素，但如果你的CSS（比如Bootstrap的类）里有更高优先级的display设置，就会失效。而*ngIf是直接添加/移除DOM元素，不受CSS影响，更稳妥：

<ul class="nav navbar-nav navbar-right">
  <!-- 登出链接：认证后渲染 -->
  <li class="nav-item dropdown" *ngIf="isAuthenticated">
    <!-- 你的下拉菜单内容 -->
  </li>
  <!-- 登录链接：未认证时渲染 -->
  <li class="nav-item" *ngIf="!isAuthenticated">
    <a class="nav-link" (click)="handleLogin()">登录</a>
  </li>
</ul>

3. 如果一定要用方法绑定（不推荐） #

如果你坚持要用authenticated()方法，那要确保状态变化时触发变更检测。可以注入ChangeDetectorRef手动更新：

组件代码： #

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

// 登录/登出后手动触发变更检测
updateAuthStatus() {
  // 你的状态更新逻辑...
  this.cdr.detectChanges();
}

但还是不推荐用方法绑定，因为Angular的变更检测会频繁调用方法，影响性能，而且容易出现视图和状态不一致的问题。

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