Question

我要求在主页中包含一个包含firstname和lastname的小表单，当用户提交表单时，它将导航到另一个表单（包含更多字段）。从第一个表格输入的值应填入第二个表格。

我正在查看共享服务并使用@input。

请告诉我有关如何完成要求的任何建议和示例方法。谢谢！

Answer 1

您可以使用$ stateParams将数据传递到其他页面。

请参阅：https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

Answer 2

根据您是否使用路由器，有几种方法。

您可以在标记中通过queryParams传递值：

<a [routerLink]="['pathToNewFormPlaceholder']" [queryParams]="{'firstName': 'John', 'lastName': 'Doe'}">Submit</a>

其中'John'和'Doe'只是表单中[[ngModel]]值的占位符，然后在新组件中订阅它们：

 export class NewFormComponent  implements OnDestroy{
   params: {};
   subscription: Subscription;

   constructor(private router: Router) {
     this.subscription = router.routerState.queryParams.subscribe(
    (queryParams: any) => this.params = queryParams);
   }

   ngOnDestroy() {
     this.subscription.unsubscribe();
   }
 }

使用变量创建服务FormService以存储您的数据和方法：

previousForm: any;

saveValues(data) {
  this.previousForm = data;
}

getFormValues() {
   return this.previousForm;
}

并将其添加到您的引导程序文件中的提供程序，如下所示：

    bootstrap(AppComponent, [
      FormService
    ]);

然后在两个表单组件中提供构造函数中的FormService： constructor(private formService: FormService);

在提交第一张表格后，请致电this.formService.saveValues({firstName, lastName})。

要获取新表单组件中的值，请调用您的服务并将值分配给所需的字段。

ngOnInit() {
   let data = this.formService.getFormValues()
   this.firstName = data.firstName;
   this.lastName = data.lastName;

}

Angular 2：提交表单数据并将值接受到另一个组件/页面

2 个答案: