如何保持表单数据切换标签/路由时 [英] How to keep form data when switching tabs/routes

问题描述

在改变路线。如何保持应用程序的状态，它是什么？
我观察到角类是重新初始化我每次切换标签的时间。

有关如。
Plunker

 进口{组件，查看，CORE_DIRECTIVES}从'angular2 / angular2
@零件（{
}）
@视图（{
  模板：`
 ＆LT;输入类=表格控[值] =测试＆GT; ＆LT; /输入＆GT;
 ＆LT; BR＆GT;
 {{测试}}
`
}）
出口类SearchPage {
    这里测试=`类型的东西去库存标签和复出搜索选项卡。类型化的数据将消失。
    我观察到角类是重新初始化我每次切换tabs.`时间;
    }
}
 

解决方案

事实上新的组件实例是航行时创建的。
您有几种选择来保存你的价值：

• 储存于应用程序绑定服务


• 储存于永久存储（localStrage / sessionStorage的）

这plunker http://plnkr.co/edit/iEUlfrgA3mpaTKmNWRpR?p=preVIEW 实现了前者。重要的位

服务（searchService.ts）

 出口类SearchService {
  SEARCHTEXT：字符串;
  构造函数（）{
    this.searchText =初始文本;
  }
}
 

的Bootstrap应用程序时，这样的实例可通过整个应用程序绑定的：

 引导程序（App [
  HTTP_BINDINGS，ROUTER_BINDINGS，SearchService，
  绑定（LocationStrategy）.toClass（HashLocationStrategy）
  ]）
  .catch（ERR =＆GT; console.error（ERR））;
 

注射它在你的SearchPage组件：（不，因为一个新的组件实例在导航创建你不应该覆盖在构造函数中的值）

 出口类SearchPage {
  sea​​rchService：SearchService;  构造函数（searchService：SearchService）{
    this.searchService = searchService;
  }}
 

输入更新服务价值：

 ＆LT;输入类=表格控[值] =searchService.searchText
 （输入）=searchService.searchText = $ event.target.value＆GT;
 

When switching routes. How to keep state of the application as it is? I observed that Angular class is reinitialize every time I switch tabs.

For eg. Plunker

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
@Component({
})
@View({
  template: `
 <input class="form-control" [value]="test"> </input>
 <br>
 {{test}}
`
})
export class SearchPage{
    test = `Type something here go to inventory tab and comeback to search tab. Typed data will gone.
    I observed that Angular class is reinitialize every time I switch tabs.`;
    }
}

解决方案

Indeed new component instance are created when navigating. You have several options to hold your value:

• Store it in a app-bound service
• Store it in a persistent storage (localStrage / sessionStorage)

this plunker http://plnkr.co/edit/iEUlfrgA3mpaTKmNWRpR?p=preview implements the former one. Important bits are

the service (searchService.ts)

export class SearchService {
  searchText: string;
  constructor() {
    this.searchText = "Initial text";
  }
}

Binding it when bootstraping the app, so that the instance is available through the whole app:

bootstrap(App, [
  HTTP_BINDINGS,ROUTER_BINDINGS, SearchService,
  bind(LocationStrategy).toClass(HashLocationStrategy)
  ])
  .catch(err => console.error(err));

Injecting it in your SearchPage component: (not that you should not override the value in the constructor since a new component instance is created upon navigation)

export class SearchPage{
  searchService: SearchService;

  constructor(searchService: SearchService) {
    this.searchService = searchService;
  }

}

Updating the service value on input:

<input class="form-control" [value]="searchService.searchText"
 (input)="searchService.searchText = $event.target.value">

这篇关于如何保持表单数据切换标签/路由时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！