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

Question

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

提交表格以下订单。
通过外部API将订单保存到数据库
保持订单对象进入支付页面

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

我的第二个问题：我是否以最好的方式完成了整个"form thing"？

form.html

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

form.component

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

After saving how can I pass object to the other page ?

表单保存操作完成后，return 来自 API 的当前保存的订单对象，然后在重定向时传递 order.id 已保存在数据库中的订单对象。还要确保在路由定义的路由参数中提到了 order 参数。

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

Am i even doing this whole "form thing" in the best way ?

是的，似乎是正确的。在导航到路线时，您正在传递 order(id) 参数。因此 paymentComponent 组件可以根据传递给路由的 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 中显示的任何数据，这就是发生的情况带参数。

数据服务

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，但这将允许组件间通信。

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

否则，我更喜欢响应式表单而不是模板驱动表单，以保持控制器中的逻辑和模板的复杂性，但你没有做错任何事情，这只是一种偏好。如果您还没有检查过响应式表单，那么这是一个不错的介绍 tutorial 供您比较两者。

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

Angular2 : How to pass value through a form to another component

javascript

angular2-forms

angular2-routing

angular