如何防止页面返回后buttonDisabled变量值被重置？

子组件内表格滚动时会触发setData函数，代码如下：

this.buttonDisabled: boolean = true;

setData(value: boolean) {
  this.name = value;
  this.buttonDisabled = false;
}

但切换至其他页面再返回原页面时，this.buttonDisabled的值会重置为初始的true，以下是几种可行的解决方法：

方法一：保持组件实例存活（路由场景） #

如果是通过路由切换页面导致组件销毁重建，可以配置路由复用策略，让组件实例保留下来：

• 在路由配置中给目标路由添加data: { reuse: true }标识
• 自定义实现RouteReuseStrategy接口，根据路由的reuse标识决定是否复用组件实例，这样切换页面时组件不会被销毁，内部变量自然不会重置。

方法二：用全局服务存储状态 #

把buttonDisabled的状态托管到全局单例服务中，组件从服务读取和修改状态，不受组件生命周期影响：

// 全局状态服务
@Injectable({ providedIn: 'root' })
export class StateService {
  private buttonDisabled$ = new BehaviorSubject<boolean>(true);
  public getButtonDisabled() {
    return this.buttonDisabled$.asObservable();
  }
  public setButtonDisabled(value: boolean) {
    this.buttonDisabled$.next(value);
  }
}

// 子组件中使用
constructor(private stateService: StateService) {}

ngOnInit() {
  this.stateService.getButtonDisabled().subscribe(val => {
    this.buttonDisabled = val;
  });
}

setData(value: boolean) {
  this.name = value;
  this.stateService.setButtonDisabled(false);
}

方法三：本地存储持久化 #

将状态存在localStorage或sessionStorage中，组件初始化时读取存储值，修改时同步更新：

// 组件初始化时读取状态
ngOnInit() {
  const savedVal = localStorage.getItem('buttonDisabled');
  this.buttonDisabled = savedVal ? JSON.parse(savedVal) : true;
}

setData(value: boolean) {
  this.name = value;
  this.buttonDisabled = false;
  // 同步到本地存储
  localStorage.setItem('buttonDisabled', JSON.stringify(this.buttonDisabled));
}

// 可选：如果不需要跨会话保存，组件销毁时清理存储
ngOnDestroy() {
  localStorage.removeItem('buttonDisabled');
}

方法四：状态提升到父组件（组件显隐场景） #

如果页面切换是父组件控制子组件的显示/隐藏（而非路由跳转），可以把buttonDisabled的状态移到父组件：

• 父组件通过@Input把状态传给子组件
• 子组件通过@Output事件通知父组件修改状态，这样子组件销毁重建时会从父组件拿到最新状态。

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