Angular 14如何向router-outlet传递对象参数并在路由组件接收？

下面两种是Angular生态中最常用的最优方案，可根据场景选择：

方案一：路由解析器（Resolver） #

适合子路由组件必须依赖User数据才能初始化的场景，能确保路由激活前数据已准备完毕。

实现步骤： #

1. 创建解析器服务，实现Resolve接口：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { User } from './user.model';

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<User> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): User {
    // 实际项目中可从共享服务/API获取User，这里直接返回示例数据
    return {
      id: 1,
      name: "John",
      icon: "john.svg",
      subsusers: [],
    };
  }
}

2. 在路由配置中绑定解析器：

import { Routes } from '@angular/router';
import { UsersComponent } from './users.component';
import { UserResolver } from './user.resolver';
import { ChildComponent } from './child.component';

const routes: Routes = [
  {
    path: 'users',
    component: UsersComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
        resolve: { user: UserResolver } // 绑定解析器
      }
    ]
  }
];

3. 子组件通过ActivatedRoute获取数据：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User } from './user.model';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  user: User;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 静态获取数据（数据不会变化时用）
    this.user = this.route.snapshot.data['user'];
    
    // 若数据可能动态更新，改用订阅方式
    // this.route.data.subscribe(data => this.user = data['user']);
  }
}

方案二：共享服务（Shared Service） #

适合User数据需要动态更新、或需在多个组件间共享的场景，支持实时响应数据变化。

实现步骤： #

1. 创建共享服务，用BehaviorSubject存储User数据：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { User } from './user.model';

@Injectable({ providedIn: 'root' })
export class UserService {
  private userSubject = new BehaviorSubject<User>(null);
  user$: Observable<User> = this.userSubject.asObservable();

  // 设置User数据
  setUser(user: User): void {
    this.userSubject.next(user);
  }

  // 获取当前User值
  getUser(): User {
    return this.userSubject.value;
  }
}

2. 父组件中设置User到服务：

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html'
})
export class UsersComponent {
  user = {
    id: 1,
    name: "John",
    icon: "john.svg",
    subsusers: [],
  };

  constructor(private userService: UserService) {
    this.userService.setUser(this.user);
  }
}

3. 子组件中获取User数据：

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { User } from './user.model';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  user: User;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    // 订阅数据变化（支持实时更新）
    this.userService.user$.subscribe(user => {
      this.user = user;
    });

    // 若无需响应变化，直接获取当前值
    // this.user = this.userService.getUser();
  }
}

方案选择建议 #

• 子路由必须依赖User数据才能加载：选路由解析器，避免组件初始化时无数据的问题。
• User数据需动态更新或多组件共享：选共享服务，支持实时数据同步。

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