Angular提交表单时如何通过@Input将用户输入传递到新组件

你当前的代码已经完成了表单构建、校验逻辑，只需要补全数据赋值、路由配置、接收端定义输入属性、模板渲染四个环节即可，具体操作如下：

1. 修改结账页提交逻辑，绑定表单值到订单对象 #

你现有代码仅在控制台打印了表单值，没有将值存入已定义的order实例，先修改CheckoutPageComponent的submit方法，补全赋值和传参逻辑：

submit() {
  this.isSubmitted = true;
  if (this.checkOutForm.invalid) return;

  // 将表单输入值绑定到order对象
  this.order.name = this.fc.name.value;
  this.order.email = this.fc.email.value;
  this.order.address = this.fc.address.value;

  alert('Your order has been placed! Order will be delivered upon successful payment.')
  // 路由跳转时通过state携带订单数据
  this.route.navigate(['/order-summary'], {
    state: { order: this.order }
  });
}

2. 配置路由规则，开启输入属性绑定 #

找到项目中定义路由规则的文件（通常为app-routing.module.ts），给order-summary对应的路由项添加bindToComponentInputs: true配置，开启路由数据到组件@Input属性的自动映射：

const routes: Routes = [
  // 其他已有路由配置保持不变
  {
    path: 'order-summary',
    component: OrderSummaryComponent, // 你用来展示提交内容的组件
    bindToComponentInputs: true // 新增该行配置
  }
];

该配置支持Angular 14及以上版本，如果你使用的是更低版本，可以在订单摘要组件的ngOnInit生命周期中通过ActivatedRoute获取路由state中的order数据，再赋值给@Input标记的属性即可，逻辑完全一致。

3. 在数据展示组件中定义@Input接收属性 #

打开订单摘要组件（OrderSummaryComponent）的ts文件，定义输入属性接收传递过来的订单数据：

import { Component, Input, OnInit } from '@angular/core';
import { Order } from '../models/Order'; // 引入你已定义的Order模型

@Component({
  selector: 'app-order-summary',
  templateUrl: './order-summary.component.html',
  styleUrls: ['./order-summary.component.css']
})
export class OrderSummaryComponent implements OnInit {
  // @Input属性名必须和路由传参时state里的key一致，这里为order
  @Input() order!: Order;

  ngOnInit(): void {
    // 此处可直接访问this.order拿到所有提交数据，包含用户输入的姓名、邮箱、地址，以及购物车商品、总价信息
  }
}

4. 在展示组件模板中渲染提交内容 #

打开订单摘要组件的html模板，直接绑定order属性即可展示用户提交的输入内容：

<div class="submitted-info">
  <h3>配送信息</h3>
  <ul>
    <li>姓名：{{ order.name }}</li>
    <li>邮箱：{{ order.email }}</li>
    <li>配送地址：{{ order.address }}</li>
  </ul>
  <!-- 你也可以在这里渲染order.items、order.totalPrice等订单关联信息 -->
</div>

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