Angular 切换选项卡/路由时如何保留表单数据？

交换路线时。如何保持应用程序的状态不变？ 我发现每次切换选项卡时，Angular类都会重新初始化

例如。

从'angular2/angular2'导入{组件、视图、核心指令}
@组成部分({
})
@看法({
模板：`


{{test}}
`
})
导出类搜索页面{
test=`在这里键入一些内容，转到“库存”选项卡并返回到“搜索”选项卡。键入的数据将消失。
我观察到，每次切换制表符时，Angular类都会重新初始化；
}
}

实际上，导航时会创建新的组件实例。 您有几个选项来保持您的价值：

• 将其存储在应用程序绑定服务中
• 将其存储在永久性存储器（localStrage/sessionStorage）中

这个plunker实现了前一个。重要的是

服务（searchService.ts）

在引导应用程序时绑定它，以便实例可通过整个应用程序使用：

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

将其注入到SearchPage组件中：（并不是说您不应该覆盖构造函数中的值，因为导航时会创建一个新的组件实例）

在输入时更新服务值：

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

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

export class SearchPage{
  searchService: SearchService;

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

}

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