Ionic 4（Angular 7）中*ngIf指令失效，视图不刷新求助

这种*ngIf切换失效的情况我在Angular+Ionic项目里碰到好多次了，核心原因基本都是Angular的变更检测没感知到loggedin状态的变化，或者状态本身不是响应式的。给你几个针对性的解决办法：

1. 用响应式状态（最推荐的最佳实践） #

普通变量的赋值操作Angular可能无法自动检测到，换成RxJS的BehaviorSubject来管理登录状态，天然支持响应式更新，从根源解决视图不刷新的问题：

第一步：改造你的Auth Provider #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 一定要确保是单例！避免多实例状态不一致
})
export class AuthProvider {
  // 用BehaviorSubject存储登录状态，初始值设为false
  private _loggedin = new BehaviorSubject<boolean>(false);
  // 对外暴露Observable，避免外部直接修改内部状态
  loggedin$ = this._loggedin.asObservable();

  login() {
    // 这里写你的登录逻辑（比如调用API验证账号密码）
    // 登录成功后更新状态
    this._loggedin.next(true);
  }

  logout() {
    this._loggedin.next(false);
  }
}

第二步：在模板中用async管道绑定 #

async管道会自动帮你订阅Observable，并且在状态变化时自动触发变更检测，更新视图：

<!-- 登录前的视图 -->
<ion-grid *ngIf="!(provider.loggedin$ | async)">
  <!-- 你的登录表单、登录按钮等内容 -->
</ion-grid>

<!-- 登录后的视图 -->
<div *ngIf="provider.loggedin$ | async">
  <!-- 登录后的用户中心、功能菜单等内容 -->
</div>

2. 确保Provider是单例 #

如果你的AuthProvider不是单例，会出现“登录修改的是另一个实例的loggedin，但视图绑定的实例状态没变化”的诡异情况。检查你的Provider配置：

• 优先用providedIn: 'root'（如上例）
• 或者在根模块（比如AppModule）的providers数组中声明，不要在多个组件/模块中重复添加。

3. 手动触发变更检测（应急方案，不推荐长期用） #

如果暂时不想重构响应式状态，可以在登录成功后手动通知Angular更新视图：

在组件中注入ChangeDetectorRef #

import { Component, ChangeDetectorRef } from '@angular/core';
import { AuthProvider } from './path/to/auth.provider';

@Component({
  // 组件元数据（selector、templateUrl等）
})
export class YourComponent {
  constructor(
    private cd: ChangeDetectorRef,
    public provider: AuthProvider
  ) {}

  onLogin() {
    this.provider.login().then(() => {
      // 登录成功后手动触发变更检测
      this.cd.detectChanges();
    });
  }
}

这种方法只是临时救急，长期来看还是响应式状态更符合Angular的设计理念，能避免很多类似的视图更新问题。

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