在Angular2中的多步骤表单之间交换数据:什么是行之有效的方法? [英] Exchange Data between multi step forms in Angular2: What is the proven way?

问题描述

我可以想象以下几种在多步骤表单之间交换数据的方法:

I can imagine following approaches to exchange Data between multi step forms:

1)为每个表单步骤创建一个组件，并通过@ input，@ output交换组件之间的数据(例如，您不能从第5步更改为第2步)

1) Create a component for each form step and exchange data between components over @input, @output (e.g. you cannot change from step5 to 2)

2)在新路由器中使用新属性data(请参阅此处)(例如，您不能从步骤5更改为2)

2) Use the new property data in the new router (see here) (e.g. you cannot change from step5 to 2))

3)共享服务(依赖注入)存储数据(组件交互)(例如，您可以更改从步骤5到2)

3) A shared Service (Dependency Injection) to store data (Component Interaction) (e.g. you can change from step5 to 2)

4)使用@ ngrx/store的新产品(尚未真正体验过)

4) New rudiments with @ngrx/store (not really experienced yet)

您能否提供一些获得的经验值"，您使用什么以及为什么?

Can you give some "gained experience values", what do you use and why?

推荐答案

为什么不使用会话存储?例如，您可以使用此静态帮助程序类(TypeScript):

Why not use session storage? For instance you can use this static helper class (TypeScript):

export class Session {

  static set(key:string, value:any) {
      window.sessionStorage.setItem(key, JSON.stringify(value));
  }

  static get(key:string) {
      if(Session.has(key)) return JSON.parse(window.sessionStorage[key])
      return null;
  }

  static has(key:string) {
      if(window.sessionStorage[key]) return true;
      return false;
  }

  static remove(key:string) {
      Session.set(key,JSON.stringify(null)); // this line is only for IE11 (problems with sessionStorage.removeItem)
      window.sessionStorage.removeItem(key);
  }

}

使用上述类，您可以将对象与多步形式的数据放在一起并共享(想法类似于许多后端框架(例如php laravel)中的会话助手").

And using above class, you can put your object with multi-steps-forms data and share it (idea is similar like for 'session helper' in many backend frameworks like e.g. php laravel).

另一种方法是创建 Singleton服务.它看起来可能像这样(为了清楚起见，非常简单)(我没有测试下面的代码，而是从头开始做的):

The other approach is to create Singleton service. It can look like that (in very simple from for sake of clarity) (I not test below code, I do it from head):

import { Injectable } from '@angular/core';

@Injectable()
export class SessionService {

    _session = {};

    set(key:string, value:any) {
         this._session[key]= value; // You can also json-ize 'value' here
    }

    get(key:string) {
         return this._session[key]; // optionally de-json-ize here
     }

     has(key:string) {
         if(this.get(key)) return true;
         return false;
     }

     remove(key:string) {         
         this._session[key]=null;
     }
}

然后在您的主文件中引导应用程序:

And then in your main file where you bootstrap application:

...
return bootstrap(App, [
  ...
  SessionService
])
...

最后一步-关键:当您想在组件中使用单例服务时-不要在提供程序部分中放入int(这是由于angular2 DI行为-阅读以上有关单例服务的链接).以下示例从表格第2步转到第3步:

And the last step - critical: When you want to use you singleton service in your component - don't put int in providers section (this is due to angular2 DI behavior - read above link about singleton services). Example below for go from form step 2 to step 3:

import {Component} from '@angular/core';
import {SessionService} from './sessionService.service';
...

@Component({
  selector: 'my-form-step-2',
  // NO 'providers: [ SessionService ]' due to Angular DI behavior for singletons
  template: require('./my-form-step-2.html'),
})

export class MyFormStep2  {

  _formData = null;

  constructor(private _SessionService: SessionService) {
     this._formData = this._SessionService.get('my-form-data')
  }

  ...
  submit() {
     this._SessionService.set('my-form-data', this._formData)
  }

}

应该看起来像那样.

这篇关于在Angular2中的多步骤表单之间交换数据:什么是行之有效的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！