Angular4页面切换后如何保留文本框输入值

嘿，我来帮你搞定这个问题！你遇到的核心问题是页面切换时Transaction组件被销毁，导致绑定的filterdata值丢失。下面给你几个实用的解决方案，按推荐程度排序：

方法一：使用Angular共享服务（最推荐） #

Angular的服务是单例模式，只要应用在运行，服务就会一直存在，非常适合存储跨组件的临时状态。

步骤1：创建共享状态服务 #

新建一个search-state.service.ts文件：

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

@Injectable()
export class SearchStateService {
  private _searchValue: string = '';

  // 存储搜索值
  setSearchValue(value: string): void {
    this._searchValue = value;
  }

  // 获取搜索值
  getSearchValue(): string {
    return this._searchValue;
  }
}

步骤2：在模块中注册服务 #

打开你的根模块（比如app.module.ts），把这个服务添加到providers数组里：

import { SearchStateService } from './search-state.service';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的模块 */],
  providers: [SearchStateService], // 注册服务
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：在Transaction组件中使用服务 #

修改你的Transaction组件代码，注入服务并在合适的时机读写状态：

import { Component, OnInit } from '@angular/core';
import { SearchStateService } from './search-state.service';

@Component({
  selector: 'app-transaction',
  templateUrl: './transaction.component.html'
})
export class TransactionComponent implements OnInit {
  filterdata: string = '';

  constructor(private searchStateService: SearchStateService) { }

  ngOnInit() {
    // 组件初始化时，从服务中恢复之前的搜索值
    this.filterdata = this.searchStateService.getSearchValue();
  }

  searchByText(filterdata: string) {
    // 搜索前先把当前值存到服务里
    this.searchStateService.setSearchValue(filterdata);
    // 执行你的搜索逻辑（比如调用接口查询数据）
    // ...
  }

  // 可选：实时监听输入变化，同步更新服务值
  onSearchInputChange() {
    this.searchStateService.setSearchValue(this.filterdata);
  }
}

步骤4：更新模板（可选） #

如果想要实时同步输入值到服务，可以给输入框加上input事件：

<td style="width:50%">
  <input class="form-control" id="input1-group1" style="margin-top:20px" 
         type="text" name="search" placeholder="Enter Search Text" 
         [(ngModel)]="filterdata" (input)="onSearchInputChange()">
</td>
<td style="width:50%">
  <button type="submit" class="input-group-addon" style="margin-left:0px;width:65px;margin-top:20px" 
          id="faIcon" (click)="searchByText(filterdata)">
    &nbsp;&nbsp;&nbsp; <i class="fa fa-search"></i>
  </button>
</td>

方法二：使用LocalStorage（快速实现） #

如果不需要跨组件共享状态，只是想保留当前会话甚至浏览器重启后的搜索值，可以直接用浏览器的LocalStorage：

修改Transaction组件代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-transaction',
  templateUrl: './transaction.component.html'
})
export class TransactionComponent implements OnInit {
  filterdata: string = '';
  private readonly STORAGE_KEY = 'transaction_search_value';

  ngOnInit() {
    // 从LocalStorage恢复值
    this.filterdata = localStorage.getItem(this.STORAGE_KEY) || '';
  }

  searchByText(filterdata: string) {
    // 把值存到LocalStorage
    localStorage.setItem(this.STORAGE_KEY, filterdata);
    // 执行搜索逻辑
    // ...
  }

  // 可选：实时更新
  onSearchInputChange() {
    localStorage.setItem(this.STORAGE_KEY, this.filterdata);
  }
}

模板部分和方法一的修改一致即可。

方法三：路由复用策略（高级场景） #

如果你的应用中有多个组件需要保留状态，可以自定义路由复用策略，让Angular在切换路由时不销毁Transaction组件。不过这个方法相对复杂，适合有一定Angular基础的开发者：你需要创建一个自定义的RouteReuseStrategy类，然后在模块中配置使用它，告诉Angular哪些路由的组件需要保留状态。

内容的提问来源于stack exchange，提问作者user9630712