Angular 12 如何实现登录后无需刷新页面显示navbar组件

问题根因 #

你的问题核心是navbar组件的showNavbar变量仅在组件初始化阶段赋值一次，后续dataService.global.showNav更新时没有通知navbar组件触发状态重渲染，所以必须刷新页面重新走初始化逻辑才能读取最新状态。

具体修改方案 #

你可以直接复用现有dataService里已经实现的广播订阅机制，不需要额外新增依赖：

1. 登录成功后广播导航栏状态变更

修改login.component.ts的登录成功回调，更新showNav后新增广播通知：

// login.component.ts
login(){
    this.credentials = this.myForm.value;
    if(this.credentials){
      this.loginService.authenticate(this.credentials)
      .subscribe(data => {
        this.storageService.setLocalStorageItem('auth', JSON.stringify(data));
        this.dataService.global.showNav = true;
        // 新增广播：通知所有订阅者导航栏状态变更为显示
        this.dataService.broadcast('navStateChange', true);
        this.sharedService.getProjectMetadata()
        .subscribe(metadata => {
          this.storageService.setLocalStorageItem('projectMetaData', JSON.stringify(metadata));
          this.router.navigate(['/home']);
        })
      }, err => console.log(err));
    } else {
      console.log('Please enter your username and password');
    }
  }

2. navbar组件订阅状态变更事件

修改navbar.component.ts，订阅导航栏状态变更事件，同时新增组件销毁时取消订阅的逻辑，避免内存泄漏：

// navbar.component.ts
import { Subscription } from 'rxjs'; // 头部导入订阅类型

export class NavbarComponent implements OnInit, OnDestroy {
  user: IAuth = {};
  showNavbar: boolean;
  progressbar: number = 0;
  // 声明订阅实例存储变量
  private navStateSub: Subscription;

  constructor(
    private storageService: StorageService,
    private dataService: DataService
  ) { 
    this.showNavbar = this.dataService.global.showNav;
  }

  ngOnInit(): void {
    this.user = JSON.parse(this.storageService.getLocalStorageItem('auth'));
    if(this.user){
      this.showNavbar = true;
    }
    // 新增订阅：监听导航栏状态变更事件
    this.navStateSub = this.dataService.subscribe('navStateChange', (newState: boolean) => {
      this.showNavbar = newState;
    });
  }

  // 新增销毁生命周期：取消订阅避免内存泄漏
  ngOnDestroy(): void {
    this.navStateSub?.unsubscribe();
  }

}

可选优化：刷新页面自动恢复状态

如果需要支持用户刷新页面后仍能正确显示导航栏，可在app.component.ts初始化时同步状态：

// app.component.ts
ngOnInit(): void {
  const auth = this.storageService.getLocalStorageItem('auth');
  if (auth) {
    this.dataService.global.showNav = true;
    this.dataService.broadcast('navStateChange', true);
  }
}

退出登录时也可同步调用广播隐藏导航栏：

// 退出登录逻辑中添加
this.dataService.global.showNav = false;
this.dataService.broadcast('navStateChange', false);
this.storageService.removeLocalStorageItem('auth');
this.router.navigate(['/login']);

修改完成后登录成功无需刷新页面，导航栏会自动接收状态变更通知完成渲染。

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