Angular 4跨组件更新变量出现异常，求问题原因分析

嘿，这个坑我之前也踩过！核心问题出在你对Angular依赖注入的理解上——你现在操作的是一个和页面渲染完全无关的HeaderComponent实例，具体来说：

当你在HomeComponent的providers数组里声明HeaderComponent时，Angular会为HomeComponent创建一个私有、全新的HeaderComponent实例。你在ngOnInit里调用setData更新的是这个私有实例的profile，但页面上实际显示的HeaderComponent是另一个完全独立的对象，所以点击logout按钮时输出的还是它自己初始的旧值。

正确的解决思路：用共享服务实现跨组件通讯 #

跨组件共享数据最推荐的方式是使用Angular的共享服务，通过RxJS的可观察对象来传递数据，确保所有组件操作的是同一份数据。下面是具体的修改步骤：

1. 创建共享数据服务 #

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

@Injectable({ providedIn: 'root' })
export class ProfileSharedService {
  // 用BehaviorSubject保存数据，它会给新订阅者发送当前最新值
  private profileSubject = new BehaviorSubject<any>({ Name: 'demo' });
  // 对外暴露只读的可观察对象
  profile$ = this.profileSubject.asObservable();

  // 更新数据的方法
  updateProfile(profileData: any) {
    this.profileSubject.next(profileData);
  }
}

2. 修改HeaderComponent #

移除不必要的方法，改为订阅共享服务的数据：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProfileSharedService } from './profile-shared.service';
import { Subscription } from 'rxjs';

@Component({
 selector: "app-layout-header",
 templateUrl: "./header.component.html"
})
export class HeaderComponent implements OnInit, OnDestroy {
 profile={Name:'demo'};
 private profileSubscription!: Subscription;

 constructor(private profileSharedService: ProfileSharedService) { }

 ngOnInit() {
  // 订阅共享服务的数据变化，自动更新当前组件的profile
  this.profileSubscription = this.profileSharedService.profile$.subscribe(profile => {
    this.profile = profile;
    console.log('当前Header实例的profile:', this.profile);
  });

  setInterval(() => {
   console.log('定时检查Header实例的profile:', this.profile)
  },3000)
 }

 ngOnDestroy() {
  // 组件销毁时取消订阅，防止内存泄漏
  this.profileSubscription?.unsubscribe();
 }

 logout() {
  console.log('logout时的profile:', this.profile)
 }
}

3. 修改HomeComponent #

移除providers里的HeaderComponent，改为注入共享服务：

@Component({
 selector: 'app-home-page',
 templateUrl: 'home.component.html',
 providers: [ProfileService] // 移除HeaderComponent
})
export class HomeComponent implements OnInit {
 constructor(
  private _profileService: ProfileService,
  private profileSharedService: ProfileSharedService // 注入共享服务
 ) { }

 ngOnInit() {
  this._profileService.getHomeData()
  .subscribe(response => {
   const profileData = response.json().payload.Profile;
   // 通过共享服务更新数据，所有订阅的组件都会收到通知
   this.profileSharedService.updateProfile(profileData);
  }, 
  err => {
   alert('home data error');
  });
 }
}

为什么这样能解决问题？ #

通过共享服务的BehaviorSubject，所有组件都订阅的是同一份数据流：

• HomeComponent获取API数据后，通知服务更新数据
• HeaderComponent会自动收到数据变化并更新自身的profile
• 页面上渲染的HeaderComponent实例和操作的是同一个对象，点击logout时自然会输出最新值

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