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：如何通过表单传递值到另一个组件

回答

相关问题