Angular通过服务实现组件传值时Home组件无法显示Login输入数据

你的实现存在两处逻辑错误，直接导致数据无法同步展示：

• 存值时机完全错误：你在Login组件的ngOnInit生命周期就执行了setMessage，此时组件刚完成初始化，用户还没在输入框输入任何内容，存到服务里的是初始的undefined。后续用户输入内容时，没有任何逻辑把新的输入值同步到服务中。
• 数据无响应式能力：Home组件仅在自身初始化的ngOnInit阶段读取了一次服务里的值，就算后续服务中的值发生变化，Home组件也不会感知到变更，自然不会触发视图更新。

用Angular自带的RxJS BehaviorSubject实现响应式跨组件数据共享，确保值变更时所有使用该数据的组件都能实时收到更新，同时修正存值的触发时机。

1. 改造共享服务 #

将普通的变量替换为可观察的数据流，对外暴露只读订阅接口，防止外部随意篡改流状态：

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

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  // 初始化时设置空字符串为默认值
  private messageSource = new BehaviorSubject<string>('');
  // 对外暴露只读可观察流，供组件订阅
  currentMessage = this.messageSource.asObservable();

  setMessage(data: string): void {
    // 向所有订阅者推送最新值
    this.messageSource.next(data);
  }
}

2. 调整Login组件逻辑 #

移除ngOnInit里的存值逻辑，在用户输入时主动将最新输入同步到服务。如果是点击提交按钮后才需要传递数据，把同步逻辑放到提交方法中即可：

import { Component } from '@angular/core';
import { SharedService } from "../shared/shared.service";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  message: string = '';

  constructor(private shared: SharedService) {}

  syncMessage(): void {
    this.shared.setMessage(this.message);
  }
}

对应Login组件模板，给输入框绑定输入触发事件：

<input 
  required 
  type="text" 
  class="form-control" 
  placeholder="Enter username" 
  [(ngModel)]="message"
  (input)="syncMessage()"
>

3. 调整Home组件逻辑 #

订阅服务中的数据流，每次收到新值就更新组件内的属性，视图会自动完成渲染。记得在组件销毁时取消订阅，避免内存泄漏：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {
  message: string = '';
  private msgSub = new Subscription();

  constructor(private shared: SharedService) {}

  ngOnInit(): void {
    this.msgSub.add(
      this.shared.currentMessage.subscribe(latestMsg => {
        this.message = latestMsg;
      })
    );
  }

  ngOnDestroy(): void {
    this.msgSub.unsubscribe();
  }
}

Home组件的模板无需修改，保留原有{{ message }}插值即可正常展示实时同步的内容。

如果两个组件是路由跳转关系（比如输入完成点击登录按钮才跳转到Home页），可以直接在登录提交方法里调用setMessage存值，Home初始化时就能拿到最新值，这种场景下不做响应式改造也能正常显示，但响应式流的写法兼容性更强，不管是同页并存组件还是路由跳转场景都能稳定工作。

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