Angular组件间传参疑问：EventEmitter无法使用的解决方案咨询

问题背景 #

我有UserlistComponent和UserdetailComponent两个组件，通过路由跳转从列表页进入详情页。原本想用EventEmitter传参，但因为详情组件不是以标签形式嵌入页面，无法订阅事件。当前用路由state传递数据是可行的，但想了解其他可行方案，备选考虑使用state.data.user结构。

UserlistComponent 核心代码 #

export class UserlistComponent implements OnInit, OnDestroy   {
  isBusy = false;
  userList: IUser[] = [];
  private userListSubscription: Subscription;
  @ViewChild('pTable', {static: false}) pTableElement: Table;
  pTableHelper: PrimengTableHelper;
  @Output() public userDetailEvent = new EventEmitter<any>();

  
  constructor(private userService: UserService,
    private router: Router
    ) { 
    
  }

  ngOnInit() {
    this.getUserList();
  }

  ngOnDestroy(): void {
    
  }

  viewUser(user: IUser): void {
    this.userDetailEvent.emit(user); 
    this.router.navigate(['/user/userdetail'],  {
      state:{
        data: user
      }});

  }

  getUserList(): void {
    this.isBusy = true;
    this.userListSubscription = this.userService.getUsersList().subscribe(
      (data: IUser[]) => {
        this.isBusy = false;
       this.userList = data; 
      },
      (error: any) => {
        //on error
        this.isBusy = false;
      },
      () => {
        this.isBusy = false;
        // default
      }
      );
    }
}

UserdetailComponent 核心代码 #

export class UserdetailComponent implements OnInit, OnDestroy   {
  isBusy = false;
  userList: IUser[] = [];
  private userListSubscription: Subscription;
  @ViewChild('pTable', {static: false}) pTableElement: Table;
  pTableHelper: PrimengTableHelper;
  public userDetailData : IUser;

  constructor(private userService: UserService, private router: Router) { 
    this.userDetailData = router.getCurrentNavigation()?.extras.state?.data;
  }

  ngOnInit() {
    
  }

  ngOnDestroy(): void {
    
  }
}

路由配置代码 #

const routes: Routes = [
    {path: '', component: UserlistComponent},
    {path: 'userdetail', component: UserdetailComponent},
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})

export class UserRoutingModule {}

可行解决方案 #

1. 优化路由State传参（你的备选方案） #

当前state传参逻辑有效，若想调整为state.data.user结构，只需修改跳转和接收逻辑：

• 在UserlistComponent的viewUser方法中：

this.router.navigate(['/user/userdetail'],  {
  state:{
    data: { user: user } // 将用户对象嵌套在data下
  }});

• 在UserdetailComponent的构造函数中：

this.userDetailData = router.getCurrentNavigation()?.extras.state?.data?.user;

这种方式保留了state传参的优势（数据不暴露在URL中），同时让数据结构更清晰。

2. 使用路由参数传递用户ID（推荐场景：数据可通过ID重新获取） #

如果用户数据能通过ID从后端重新获取，更推荐用路由参数传递ID，避免直接传递大对象，且页面刷新后数据不会丢失：

• 修改路由配置：

const routes: Routes = [
    {path: '', component: UserlistComponent},
    {path: 'userdetail/:userId', component: UserdetailComponent}, // 添加userId参数
];

• 修改UserlistComponent的跳转逻辑：

viewUser(user: IUser): void {
  this.router.navigate(['/user/userdetail', user.id]); // 传递用户ID
}

• 在UserdetailComponent中获取ID并请求数据：

export class UserdetailComponent implements OnInit, OnDestroy   {
  public userDetailData : IUser;
  private userSubscription: Subscription;

  constructor(private userService: UserService, private route: ActivatedRoute) { }

  ngOnInit() {
    const userId = this.route.snapshot.paramMap.get('userId');
    if (userId) {
      this.isBusy = true;
      this.userSubscription = this.userService.getUserById(userId).subscribe(
        (data: IUser) => {
          this.isBusy = false;
          this.userDetailData = data;
        },
        (error) => {
          this.isBusy = false;
          // 处理错误逻辑
        }
      );
    }
  }

  ngOnDestroy(): void {
    this.userSubscription?.unsubscribe();
  }
}

3. 用共享Service传递数据 #

创建共享服务存储和传递用户数据，适合多组件间共享状态的场景：

• 创建共享服务：

@Injectable({ providedIn: 'root' })
export class UserSharedService {
  private userSubject = new BehaviorSubject<IUser | null>(null);
  currentUser$ = this.userSubject.asObservable();

  setCurrentUser(user: IUser): void {
    this.userSubject.next(user);
  }
}

• 在UserlistComponent中设置数据：

constructor(private userService: UserService, private router: Router, private userSharedService: UserSharedService) { }

viewUser(user: IUser): void {
  this.userSharedService.setCurrentUser(user);
  this.router.navigate(['/user/userdetail']);
}

• 在UserdetailComponent中订阅数据：

export class UserdetailComponent implements OnInit, OnDestroy   {
  public userDetailData : IUser;
  private userSubscription: Subscription;

  constructor(private userSharedService: UserSharedService) { }

  ngOnInit() {
    this.userSubscription = this.userSharedService.currentUser$.subscribe(user => {
      if (user) {
        this.userDetailData = user;
      }
    });
  }

  ngOnDestroy(): void {
    this.userSubscription?.unsubscribe();
    // 可选：清空数据，避免其他组件拿到旧数据
    this.userSharedService.setCurrentUser(null);
  }
}

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