Question

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

提交表格进行订购。
通过外部API将订单保存到数据库
在保留订单对象的同时转到付款页面

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

我的第二个问题：我是以最好的方式做这整个“形式的事情”吗？

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

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

表单保存操作完成后，从API返回当前保存的订单对象，然后重定向已保存在DB中的通过order.id。另外，请确保在路由定义的route参数中提及order参数。

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

我是以最好的方式做这整个“形式的事情”吗？

是的，这似乎是正确的。导航到路由时，您正在传递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中显示的数据，这就是发生的事情与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，但这将允许组件间通信。

如果您已有数据，则不想再发出请求。一次或两次这样做并不会造成伤害，但随着您的应用程序的增长，您的策略会降低性能。

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

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

2 个答案: