我可以想象以下方法在多步骤形式之间交换数据：
1)为每个表单步骤创建一个组件,并通过@input,@output在组件之间交换数据(例如,您不能从step5更改为2)
2)在新路由器(see here)中使用新的属性数据(例如,您不能从步骤5更改为2))
3)共享服务(Dependency Injection)存储数据(Component Interaction)(例如,您可以从步骤5更改为2)
4)@ ngrx / store的新基础(没有真正体验过)
你能给一些“获得经验值”,你用什么和为什么？
为什么不使用会话存储？例如,您可以使用此静态助手类(TypeScript)：
原文链接：https://www.f2er.com/angularjs/140454.htmlexport 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的’会话助手’).
另一种方法是创建Singleton service.它可以看起来像(为了清楚起见非常简单)(我没有测试下面的代码,我从头开始)：
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;
}
}
然后在您的主文件中引导应用程序：
... return bootstrap(App,[ ... SessionService ]) ...
最后一步 – 关键：当你想在你的组件中使用你的单例服务时 – 不要在提供者部分中放置int(这是由于angular2 DI行为 – 上面有关单例服务的链接).下面的示例从步骤2到步骤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)
}
}
它应该是这样的.
