Angular中如何将提交后的表单数据传递至另一个组件？

下面提供三种实用方案，根据你的场景选择合适的方式：

方案一：使用路由状态传递（Angular 7.2+ 支持，推荐单次传递复杂对象） #

这种方式无需序列化对象，直接通过路由导航的state参数传递。

1. 修改提交组件的跳转逻辑 #

onclickval(demande: NgForm) {
  this.httpClient.post('http://localhost:9090/demande/createNewDemande/' + this.cin, demande.value)
    .subscribe((response) => {
      console.log(response);
      // 传递后端返回的对象到路由状态中
      this.router.navigate(['accueil/decharge'], {
        state: { createdDemande: response }
      });
    });
}

2. 在目标组件（DechargeComponent）中获取对象 #

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-decharge',
  templateUrl: './decharge.component.html',
  styleUrls: ['./decharge.component.css']
})
export class DechargeComponent implements OnInit {
  createdDemande: any;

  constructor(private router: Router) { }

  ngOnInit(): void {
    // 从路由状态中取出对象
    const navigation = this.router.getCurrentNavigation();
    this.createdDemande = navigation?.extras.state?.['createdDemande'];
  }
}

3. 在目标组件HTML中展示信息 #

<div *ngIf="createdDemande">
  <h3>已创建的申请详情</h3>
  <p>申请ID：{{ createdDemande.id }}</p>
  <p>申请内容：{{ createdDemande.content }}</p>
  <!-- 展示嵌套对象的属性 -->
  <p>关联用户：{{ createdDemande.relatedUser?.name }}</p>
</div>

方案二：使用共享服务（推荐多组件共享或需持久化场景） #

通过全局服务存储对象，适合复杂对象或需要在多个组件间共享数据的场景。

1. 创建共享服务 #

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

@Injectable({
  providedIn: 'root'
})
export class DemandeSharedService {
  // 用BehaviorSubject存储对象，支持订阅更新
  private createdDemandeSubject = new BehaviorSubject<any>(null);
  createdDemande$ = this.createdDemandeSubject.asObservable();

  // 存储后端返回的对象
  setCreatedDemande(demande: any) {
    this.createdDemandeSubject.next(demande);
  }
}

2. 修改提交组件的逻辑 #

import { DemandeSharedService } from './../demande-shared.service';

constructor(
  private httpClient: HttpClient, 
  private router: Router, 
  private demandeService: DemandeSharedService
) { }

onclickval(demande: NgForm) {
  this.httpClient.post('http://localhost:9090/demande/createNewDemande/' + this.cin, demande.value)
    .subscribe((response) => {
      console.log(response);
      // 将对象存入共享服务
      this.demandeService.setCreatedDemande(response);
      this.router.navigate(['accueil/decharge']);
    });
}

3. 在目标组件中订阅获取对象 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DemandeSharedService } from './../demande-shared.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-decharge',
  templateUrl: './decharge.component.html',
  styleUrls: ['./decharge.component.css']
})
export class DechargeComponent implements OnInit, OnDestroy {
  createdDemande: any;
  private subscription: Subscription;

  constructor(private demandeService: DemandeSharedService) { }

  ngOnInit(): void {
    // 订阅服务中的对象更新
    this.subscription = this.demandeService.createdDemande$.subscribe(demande => {
      this.createdDemande = demande;
    });
  }

  // 组件销毁时取消订阅，避免内存泄漏
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

HTML展示代码同方案一。

方案三：使用查询参数（适合简单对象，刷新页面不丢失） #

通过序列化对象为JSON字符串，作为查询参数传递，缺点是对象过大会导致URL过长，且数据会暴露在URL中。

1. 修改提交组件的跳转逻辑 #

onclickval(demande: NgForm) {
  this.httpClient.post('http://localhost:9090/demande/createNewDemande/' + this.cin, demande.value)
    .subscribe((response) => {
      console.log(response);
      // 序列化对象为JSON字符串
      const demandeStr = JSON.stringify(response);
      this.router.navigate(['accueil/decharge'], {
        queryParams: { demande: demandeStr }
      });
    });
}

2. 在目标组件中获取并反序列化 #

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-decharge',
  templateUrl: './decharge.component.html',
  styleUrls: ['./decharge.component.css']
})
export class DechargeComponent implements OnInit {
  createdDemande: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 获取查询参数并反序列化
    this.route.queryParams.subscribe(params => {
      if (params['demande']) {
        this.createdDemande = JSON.parse(params['demande']);
      }
    });
  }
}

HTML展示代码同方案一。

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