Angular搜索组件跳转返回后如何在输入框显示此前的搜索文本

因为你使用了Angular响应式表单的[formControl]做双向绑定，只要修改绑定的searchTextForm实例的值，输入框会自动同步更新，不需要手动操作DOM节点，以下是两种可行实现方案：

方案1：初始化FormControl时直接设置默认值（最简便） #

你定义searchTextForm变量的位置，直接把localStorage取出的值作为初始值传入即可：

// 原有代码一般为
// searchTextForm = new FormControl('');
// 修改为下方代码即可
searchTextForm = new FormControl(localStorage.getItem('searched') ?? '');

用??运算符做兜底处理，如果localStorage里没有对应存储值，输入框默认显示空字符串。

方案2：在ngOnInit生命周期中手动赋值 #

如果你需要在ngOnInit里做额外的判断逻辑，可以调用FormControl的setValue/patchValue方法赋值：

ngOnInit(): void {
  const savedSearchText = localStorage.getItem('searched');
  // 只有存在存储的搜索值时才赋值
  if (savedSearchText) {
    this.searchTextForm.setValue(savedSearchText);
    // 单字段场景下patchValue效果和setValue完全一致，也可以写为：
    // this.searchTextForm.patchValue(savedSearchText);
  }

  // 你原有其他ngOnInit逻辑...
}

补充注意：如果需要在用户清空搜索框的时候也同步更新存储值，可以监听FormControl的值变化，或者在用户主动清空的逻辑里更新localStorage即可。

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