如何通过Angular路由向组件传递完整对象？

以下是3种不需要传递整个mangas数组的实现方式，可根据业务场景选择：

方案1：使用路由State传参（Angular 7+ 推荐） #

Angular原生支持通过路由状态传递隐式参数，不会暴露在地址栏，实现成本最低。

模板修改： #

给routerLink绑定state属性传入完整对象：

<div *ngFor="let manga of mangas">
  <h1> {{ manga.title }} </h1>
  <button 
    routerLink="/manga/{{ manga.title }}"
    [state]="{ selectedManga: manga }"
  >
    read the manga
  </button>
</div>

目标路由组件取值： #

通过Location API获取路由状态：

import { Location } from '@angular/common';
import { Manga } from '你的manga接口定义路径';

export class MangaDetailComponent {
  currentManga?: Manga;
  constructor(private location: Location) {}

  ngOnInit() {
    const state = this.location.getState() as { selectedManga?: Manga };
    this.currentManga = state.selectedManga;
    // 兜底逻辑：如果state为空（用户手动刷新页面），可通过url中的manga title去后端/本地缓存拉取完整数据
  }
}

优缺点：实现简单，参数不对外暴露，缺点是页面刷新后state会丢失，需要加兜底逻辑

方案2：共享服务存值 #

适合多路由流转、复杂业务场景使用，是Angular状态共享的通用方案。

第一步：创建全局共享服务 #

// manga-share.service.ts
import { Injectable } from '@angular/core';
import { Manga } from '你的manga接口定义路径';

@Injectable({ providedIn: 'root' })
export class MangaShareService {
  selectedManga: Manga | null = null;
}

第二步：Home组件跳转前存值 #

将按钮改为点击事件触发跳转，跳转前先把选中的manga存入服务：

<!-- home组件模板 -->
<div *ngFor="let manga of mangas">
  <h1> {{ manga.title }} </h1>
  <button (click)="jumpToDetail(manga)">
    read the manga
  </button>
</div>

// home组件ts
import { Router } from '@angular/router';
import { MangaShareService } from './manga-share.service';

export class HomeComponent {
  constructor(
    private router: Router,
    private mangaShareService: MangaShareService
  ) {}

  jumpToDetail(manga: Manga) {
    this.mangaShareService.selectedManga = manga;
    this.router.navigate([`/manga/${manga.title}`]);
  }
}

第三步：目标组件取值 #

import { MangaShareService } from './manga-share.service';

export class MangaDetailComponent {
  currentManga?: Manga;
  constructor(private mangaShareService: MangaShareService) {}

  ngOnInit() {
    this.currentManga = this.mangaShareService.selectedManga ?? undefined;
    // 同样可加刷新兜底逻辑
  }
}

优缺点：可支持多路由流转共享数据，扩展性强，缺点是页面刷新后服务内存会重置，同样需要兜底

方案3：queryParams序列化传值（不推荐） #

仅适合极小的简单对象使用，会将参数暴露在地址栏，有长度限制。

<button 
  routerLink="/manga/{{ manga.title }}"
  [queryParams]="{ manga: JSON.stringify(manga) }"
>
  read the manga
</button>

取值逻辑：

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

export class MangaDetailComponent {
  currentManga?: Manga;
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const mangaStr = this.route.snapshot.queryParamMap.get('manga');
    if (mangaStr) this.currentManga = JSON.parse(mangaStr);
  }
}

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