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 ，但這將允許組件間的通信。

如果您已經有可用數據，則您不想再發出請求。 這樣做一次或兩次都不會有什么壞處，但是隨着應用程序的增長，這種策略將降低性能。

否則，與模板驅動的表單相比，我更喜歡反應式表單，以使控制器中的邏輯和模板的復雜性降低，但是您沒有做任何錯誤，這只是一種偏愛。 如果您還沒有簽出反應形式，那么這是一個不錯的入門教程 ，您可以將兩者進行比較。