AngularJS组件间数据共享异常：list模块未同步更新数据求助

看起来你遇到的核心问题是服务里的数据变化没能通知到component1.list组件——普通变量赋值不会自动触发Angular的变更检测，所以即便服务里的userInput变了，组件视图也不会同步更新。咱们用RxJS的响应式方案就能搞定，具体步骤如下：

1. 改造Messages服务 #

把服务里的普通变量换成BehaviorSubject（它能保存当前值，新订阅的组件也能直接拿到最新数据）：

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

@Injectable({
  providedIn: 'root' // 确保服务是单例，或者在共享模块中统一提供
})
export class MessagesService {
  // 初始化一个默认值，比如空字符串
  private userInputSource = new BehaviorSubject<string>('');
  // 对外暴露可观察对象，外部只能订阅不能直接修改
  userInput$ = this.userInputSource.asObservable();

  // 提供更新数据的方法
  updateUserInput(newInput: string) {
    this.userInputSource.next(newInput);
  }
}

2. 在component1.post组件中触发数据更新 #

当用户输入文本时，调用服务的updateUserInput方法传递新值：

import { Component } from '@angular/core';
import { MessagesService } from './messages.service';

@Component({
  selector: 'app-component1-post',
  template: `<input type="text" [(ngModel)]="inputText" (input)="onInputUpdate()">`
})
export class Component1PostComponent {
  inputText = '';

  constructor(private messagesService: MessagesService) {}

  onInputUpdate() {
    this.messagesService.updateUserInput(this.inputText);
  }
}

3. 在component1.list组件中订阅数据变化 #

推荐用Angular的async管道（自动管理订阅，避免内存泄漏），让视图自动响应数据变化：

模板部分 #

<p>{{ listUserInput$ | async }}</p>

组件类部分 #

import { Component } from '@angular/core';
import { MessagesService } from './messages.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-component1-list',
  templateUrl: './component1-list.component.html'
})
export class Component1ListComponent {
  listUserInput$: Observable<string>;

  constructor(private messagesService: MessagesService) {
    // 订阅服务的可观察对象
    this.listUserInput$ = this.messagesService.userInput$;
  }
}

如果你偏好手动订阅，记得在组件销毁时取消订阅：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MessagesService } from './messages.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-component1-list',
  template: `<p>{{ listUserInput }}</p>`
})
export class Component1ListComponent implements OnInit, OnDestroy {
  listUserInput = '';
  private inputSub: Subscription;

  constructor(private messagesService: MessagesService) {}

  ngOnInit() {
    this.inputSub = this.messagesService.userInput$.subscribe(newInput => {
      this.listUserInput = newInput;
    });
  }

  ngOnDestroy() {
    this.inputSub.unsubscribe(); // 组件销毁时清理订阅
  }
}

4. 确认服务的单例性 #

最后要确保MessagesService是单例：要么用providedIn: 'root'，要么在common.sharedata模块中提供，并且该模块被component1.post和component1.list所在的模块导入——只有两个组件拿到同一个服务实例，数据共享才会生效。

这样修改后，你在component1.post输入文本时，服务会主动推送新值，component1.list的视图就会自动同步更新啦。

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