Angular2：如何通过表单将值传递给另一个组件

Question

我是Angular2的新手，我想做一些简单的事情：

1. 提交表格下订单。
2. 通过外部API将订单保存到数据库中
3. 保留订单对象的同时转到付款页面

我的第一个问题 ：保存后如何将对象传递到另一页？

我的第二个问题 ：我是否还在以最佳方式完成整个“形式化的事情”？

form.html

<form [formGroup]="orderForm" #formDir="ngForm" (ngSubmit)="submitForm(formDir.value)">
    [...]
</form>

形式组件

submitForm(): void {
    this.orderService.saveOrder(this.order)
        .then(() => this.router.navigateByUrl('/payment', ['order', this.order]));
}

paymentComponent

order: Order;

constructor(route: ActivatedRoute) {
    route.queryParams.subscribe(params => {
        this.order = params['order'];
    });
}

Answer 1

保存后，如何将对象传递到另一页？

表单保存操作完成后，从API返回当前已保存的订单对象，然后重定向已保存在数据库中的pass order.id 。 还要确保在路由定义的route参数中提到了order参数。

submitForm(): void {
    this.orderService.saveOrder(this.order)
        .then((savedOrderObj) => this.router.navigateByUrl('/payment', ['order', savedOrderObj.id]));
}

我什至以最好的方式完成了整个“形式上的事情”吗？

是的，这似乎是正确的。 导航至路线时，您传递的是order （id）参数。 因此， paymentComponent组件可以根据传递给路线的order参数来检索该Order。

您应该考虑将routeParams订阅代码移至ngOnInit钩子，因为构造函数不应具有任何启动逻辑。 创建一个OrderService ，它将完全负责检索order数据。 它可以有不同的方法，其中之一可能是基于id检索数据。

constructor(private route: ActivatedRoute, private orderService: OrderService) {
}
ngOnInit() {
    this.route.queryParams.subscribe(params => {
        this.orderService.getOrderById(params['order']).subscribe(
           (order) => this.order = order
        );
    });
}

Answer 2

@omeralper的注释是正确的，您需要使用服务来传递复杂的数据类型，例如对象文字，或者您不希望在URL中显示的任何数据，而params就是这种情况。

数据服务

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

@Injectable() 
export class DataService {
  data: {[key: string]: any}; 
}

成分X

import {Component} from '@angular/core'

import { DataService } from './data.service';

@Component() 
export class X {

  get data(): {[key: string]: any}{ 
    return this.dataService.data; 
  }

  set data(value: {[key: string]: any}) { 
    this.dataService.data = value; 
  } 

  constructor(public dataService: DataService) { } 

  submitForm(): void {
    this.dataService.set(this.order); // Store order for use by next component
    this.orderService.saveOrder(this.order)
      .then(() => this.router.navigateByUrl('/y'));
  }
}

成分Y

import {Component} from '@angular/core'

import { DataService } from './data.service';

@Component() 
export class Y { 

  data: { [key: string]: any };

  get data(): {[key: string]: any}{ 
    return this.dataService.data; 
  } 

  set data(value: {[key: string]: any}) { 
    this.dataService.data = value; 
  } 

  constructor(public dataService: DataService) { }

  ngOnInit() {
    this.data = this.dataService.get(); // Route component loads and you retrieve the data
  }
}

您可能希望增强服务，也许可以将其称为RouteDataService ，但这将允许组件间的通信。

如果您已经有可用数据，则您不想再发出请求。 这样做一次或两次都不会有什么坏处，但是随着应用程序的增长，这种策略将降低性能。

否则，与模板驱动的表单相比，我更喜欢反应式表单，以使控制器中的逻辑和模板的复杂性降低，但是您没有做任何错误，这只是一种偏爱。 如果您还没有签出反应形式，那么这是一个不错的入门教程 ，您可以将两者进行比较。