Angular 2中如何在独立组件间传递复杂类型用户数据对象？

嘿，作为Angular新手遇到组件间传参的问题太正常了！针对你的场景——从AuthComponent跳转到UserExistComponent时传递已存在的用户数据，我给你三个实用的解决方案，你可以根据自己的需求选择：

方案1：通过路由状态传递数据（临时传递首选） #

这种方法适合临时传递数据，不需要持久化，跳转到目标组件后直接获取。

修改auth.component.ts的导航代码 #

在API返回数据后，用router.navigate替代navigateByUrl，并附带状态数据：

userRegister() {
  // ... 原有代码
  this.userService.loginRegisterUser(this.userRegisterModel)
    .subscribe(
      data =>{
        console.log(data);
        // 替换原有导航代码，附带用户数据到路由状态
        this.router.navigate(['/user-exist'], { 
          state: { userData: data } 
        });
      },
      err => {
        alert(err);
        this.errors = err;
        this.isRegistering = false;
      }
    );
}

在userExist.component.ts中获取数据 #

在ngOnInit里通过Router的getCurrentNavigation方法读取路由状态：

ngOnInit() {
  const navigation = this.router.getCurrentNavigation();
  // 检查是否有状态数据
  if (navigation?.extras.state) {
    this.userRegisterModel = navigation.extras.state['userData'];
  }
}

注意：这种方法的缺点是刷新UserExistComponent页面后，路由状态会丢失，适合仅在跳转过程中传递数据的场景。

方案2：使用共享服务（跨组件共享首选） #

如果你的用户数据需要在多个组件之间共享，或者希望刷新页面后仍能保留（结合本地存储的话），用共享服务是最佳选择。

第一步：创建共享服务 #

新建一个user-shared.service.ts文件，用BehaviorSubject来保存和分发用户数据：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { LoggedUserRegister } from './path-to-your-logged-user-register-model'; // 替换成你的模型路径

@Injectable({ providedIn: 'root' })
export class UserSharedService {
  // BehaviorSubject会保存最新的用户数据，新订阅者能直接获取当前值
  private userDataSubject = new BehaviorSubject<LoggedUserRegister | null>(null);
  userData$ = this.userDataSubject.asObservable();

  // 设置用户数据的方法
  setUserData(userData: LoggedUserRegister) {
    this.userDataSubject.next(userData);
  }
}

第二步：在auth.component.ts中注入服务并设置数据 #

// 导入共享服务
import { UserSharedService } from './user-shared.service';

export class AuthComponent implements OnInit {
  // 在构造函数中注入服务
  constructor(
    private userService: UserService,
    private router: Router,
    private userSharedService: UserSharedService // 新增
  ) {}

  userRegister() {
    // ... 原有代码
    this.userService.loginRegisterUser(this.userRegisterModel)
      .subscribe(
        data =>{
          console.log(data);
          // 把数据存入共享服务
          this.userSharedService.setUserData(data);
          this.router.navigateByUrl('/user-exist');
        },
        err => {
          alert(err);
          this.errors = err;
          this.isRegistering = false;
        }
      );
  }
}

第三步：在userExist.component.ts中订阅数据 #

// 导入共享服务
import { UserSharedService } from './user-shared.service';

export class UserExistComponent implements OnInit {
  userRegisterModel: LoggedUserRegister = new LoggedUserRegister();

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private userService: UserService,
    private fb: FormBuilder,
    private userSharedService: UserSharedService // 新增
  ) {}

  ngOnInit() {
    // 订阅共享服务中的用户数据
    this.userSharedService.userData$.subscribe(userData => {
      if (userData) {
        this.userRegisterModel = userData;
      }
    });
  }
}

方案3：使用本地存储（持久化数据首选） #

如果希望刷新UserExistComponent页面后数据依然存在，可以用localStorage或sessionStorage来存储数据。

修改auth.component.ts的代码 #

userRegister() {
  // ... 原有代码
  this.userService.loginRegisterUser(this.userRegisterModel)
    .subscribe(
      data =>{
        console.log(data);
        // 把数据转成JSON字符串存入localStorage
        localStorage.setItem('existingUser', JSON.stringify(data));
        this.router.navigateByUrl('/user-exist');
      },
      err => {
        alert(err);
        this.errors = err;
        this.isRegistering = false;
      }
    );
}

在userExist.component.ts中获取数据 #

ngOnInit() {
  // 从localStorage读取数据并转成对象
  const userDataStr = localStorage.getItem('existingUser');
  if (userDataStr) {
    this.userRegisterModel = JSON.parse(userDataStr);
    // 可选：用完数据后删除，避免残留
    localStorage.removeItem('existingUser');
  }
}

注意：localStorage会永久保存数据（除非手动删除），sessionStorage仅在当前会话有效。敏感数据不建议存在本地存储，因为容易被篡改。

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