Angular 4组件间变量值修改问题咨询

嗨，针对你在Angular 4里组件间修改变量的疑问，结合你的路由结构（Home作为父组件嵌套了Welcome/Users/Login这些子组件），我整理了几种实用的方案，你可以根据组件之间的关系来选择：

因为你的子组件是通过路由嵌套在Home里的，直接用@Input()/@Output()会有点麻烦，这里推荐两种更适配路由场景的方式：

方式一：用共享服务实现实时状态同步 #

这是最灵活的方案，适合需要实时同步变量的场景。首先创建一个共享服务：

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

@Injectable()
export class DataShareService {
  // 用BehaviorSubject存储变量，支持初始值，新订阅者能拿到最新值
  private sharedVariable = new BehaviorSubject<string>('初始值');
  // 暴露可观察对象供组件订阅
  currentVariable = this.sharedVariable.asObservable();

  constructor() { }

  // 提供修改变量的方法
  updateVariable(newValue: string) {
    this.sharedVariable.next(newValue);
  }
}

记得把这个服务添加到AppModule的providers数组里，确保全局只有一个实例。

然后在父/子组件里使用：

• 在HomeComponent里修改变量：

import { DataShareService } from './data-share.service';

constructor(private dataService: DataShareService) {}

changeVariable() {
  this.dataService.updateVariable('从Home组件修改的值');
}

• 在WelcomeComponent里订阅并修改：

import { DataShareService } from './data-share.service';

currentValue: string;

constructor(private dataService: DataShareService) {
  // 订阅变量变化，实时更新本地值
  this.dataService.currentVariable.subscribe(value => {
    this.currentValue = value;
  });
}

updateValueFromChild() {
  this.dataService.updateVariable('从Welcome组件修改的值');
}

方式二：通过路由参数传递（适合一次性传值） #

如果只是在路由跳转时传递变量，不需要实时同步，可以用查询参数或路由参数：

• 跳转时携带参数（比如在Home里跳转到Welcome）：

import { Router } from '@angular/router';

constructor(private router: Router) {}

goToWelcome() {
  this.router.navigate(['welcome'], { queryParams: { userName: 'Arnold' } });
}

• 在Welcome组件里接收并修改变量：

import { ActivatedRoute } from '@angular/router';

userName: string;

constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe(params => {
    this.userName = params['userName'];
    // 这里可以直接修改本地变量
  });
}

兄弟组件之间没有直接的父子关联，最推荐的还是用上面提到的共享服务——两个组件都注入DataShareService，一个调用updateVariable修改值，另一个通过subscribe监听变化，就能实现变量同步。

如果不想用服务，也可以通过父组件中转：比如Welcome通过@Output触发事件通知Home修改变量，Home再通过某种方式把变量传给Users，但这种方式耦合度高，不如服务灵活。

这种跨路由的组件通信，首选还是共享服务。如果需要持久化保存变量（比如登录状态），也可以用localStorage或sessionStorage：

// 保存变量
localStorage.setItem('userToken', 'your-login-token');
// 获取并修改变量
const oldToken = localStorage.getItem('userToken');
localStorage.setItem('userToken', 'new-token-value');

不过这种方式不适合需要实时同步的场景，因为修改后不会主动通知其他组件。

• 共享服务一定要全局注入，避免多个实例导致状态不一致；
• BehaviorSubject比普通Subject更实用，因为它会给新订阅者发送当前的最新值；
• 如果是简单的父子场景，也可以用@ViewChild获取子组件实例直接修改变量，但这种方式耦合度高，不推荐复杂项目使用。

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