Angular2：如何通過表單傳遞值到另一個組件

我是新來Angular2，我想簡單做一下：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']; 
    }); 
}

來源

2017-10-10 Dr.Linus

您必須指定接收訂單作爲參數的路線。 – Fals

您可以使用@Input或使用共享服務將值傳遞給其他組件。如果您分享您的html結構，我們可以提供更多幫助。 – omeralper

節省如何傳遞對象到另一個頁面後？

表格保存操作完成後，從API返回一個當前保存的訂單對象，然後重定向時傳遞已保存在數據庫中的order.id。還要確保在路由定義的路由參數中有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 
     ); 
    }); 
}

來源

2017-10-10 20:31:46

他爲什麼要獲取他已有的數據？ – omeralper

@meralper我會永遠相信任何已經保存在數據庫中的東西。我不喜歡太聰明。如果一個ajax調用會提供更多的數據一致性，那麼它值得（但可能需要幾ms） –

如果你有一個快速頁面轉換的動態頁面，毫秒很重要。 – omeralper

@ 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 
    } 
}

你會想牛逼o加強服務，也許稱它爲RouteDataService，但這將允許組件間通信。

如果您已有可用的數據，則不想提出其他請求。這樣做一次或兩次並不會造成傷害，但隨着應用程序的增長，使您的策略會降低性能。否則，我更喜歡模板驅動窗體上的反應形式來保持控制器中的邏輯和模板的複雜性，但是你沒有做錯任何事情，只是一種偏好。如果你還沒有檢出反應形式，但這是一個體面的介紹tutorial讓你比較兩者。

來源

2017-10-10 21:10:22 mtpultz

Angular2：如何通過表單傳遞值到另一個組件

回答

相關問題