Angular路由跳转返回后mat-checkbox复选框选中状态丢失如何解决

Angular默认路由策略下，从Pricing组件导航跳转至其他组件时，Pricing组件实例会被完全销毁，组件内维护的临时状态（包括绑定复选框的active对象、bnbPrice/coinPrice等表单值）会随实例回收被清空。返回Pricing组件时会重新初始化实例，所有值回到初始默认状态，最终表现为复选框选中状态重置。

现有模板通过[checked]直接绑定active对象的属性，只要保证组件初始化时active的对应字段为用户之前操作的选中值，复选框就会自动回显正确状态，无需修改现有模板绑定逻辑。

根据业务场景选择对应方案即可：

方案1：共享状态服务（优先推荐，适配多组件共享编辑数据场景） #

通过根级单例服务存储Pricing页面的编辑草稿状态，服务为全局单例不会随组件销毁清空，组件初始化时从服务读取草稿回填，值变更时同步更新服务存储。

1. 新建状态服务：

// pricing-state.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class PricingStateService {
  pricingDraft: {
    bothMandatory?: boolean;
    acceptBnb?: boolean;
    acceptCoin?: boolean;
    bnbPrice?: string;
    coinPrice?: string;
  } = {};

  // 提交表单/退出编辑时调用，清空草稿避免下次进入带旧值
  resetDraft() {
    this.pricingDraft = {};
  }
}

2. 在Pricing组件中接入服务：

// pricing.component.ts
import { Component, OnInit } from '@angular/core';
import { PricingStateService } from './pricing-state.service';

@Component({
  selector: 'app-pricing',
  templateUrl: './pricing.component.html'
})
export class PricingComponent implements OnInit {
  active: any = {};
  bnbPrice: string = '';
  coinPrice: string = '';
  mode = 'edit';

  constructor(private pricingState: PricingStateService) {}

  ngOnInit() {
    // 优先读取服务中存的草稿值，无草稿再走原有初始数据拉取逻辑
    if (Object.keys(this.pricingState.pricingDraft).length) {
      const saved = this.pricingState.pricingDraft;
      this.active = {
        ...this.active,
        bothMandatory: saved.bothMandatory,
        acceptBnb: saved.acceptBnb,
        acceptCoin: saved.acceptCoin
      };
      this.bnbPrice = saved.bnbPrice || '';
      this.coinPrice = saved.coinPrice || '';
    } else {
      // 原有拉取初始配置的逻辑，比如调用接口获取默认值
      // this.loadInitialPricingConfig();
    }
  }

  onCheckBoxChange(event: any, type: string) {
    const checked = event.checked;
    switch(type) {
      case '':
        this.active.bothMandatory = checked;
        break;
      case 'BNB':
        this.active.acceptBnb = checked;
        break;
      case 'Coin':
        this.active.acceptCoin = checked;
        break;
    }
    this.syncDraftToService();
  }

  // 所有表单值变更时都调用该方法同步状态
  syncDraftToService() {
    this.pricingState.pricingDraft = {
      bothMandatory: this.active.bothMandatory,
      acceptBnb: this.active.acceptBnb,
      acceptCoin: this.active.acceptCoin,
      bnbPrice: this.bnbPrice,
      coinPrice: this.coinPrice
    };
  }

  // 原有业务方法保持不变
  distributeEqualy() {}
  verifyCompleteData() {}
  blockNegativeNumber() {}
}

3. 模板中给百分比输入框加同步调用，保证输入值也能持久化：

<!-- BNB价格输入框 -->
<input 
  [disabled]="mode === 'view'" 
  (keydown.ArrowDown)="blockNegativeNumber($event, $event.target.value)" 
  type="text" 
  class="input big-value" 
  (input)="verifyCompleteData(); syncDraftToService()" 
  [(ngModel)]="bnbPrice" 
  placeholder="00,0%"
  appMaskPercentual>

<!-- TOKEN价格输入框做相同修改 -->
<input 
  [disabled]="mode === 'view'" 
  (keydown.ArrowDown)="blockNegativeNumber($event, $event.target.value)" 
  type="text" 
  class="input big-value" 
  (input)="verifyCompleteData(); syncDraftToService()" 
  [(ngModel)]="coinPrice" 
  placeholder="00,0%"
  appMaskPercentual>

注意：表单正式提交成功、用户点击取消退出编辑流程时，需要调用pricingState.resetDraft()清空草稿，避免下次进入编辑页残留旧值。

方案2：自定义路由复用策略（适配同模块Tab页切换场景） #

如果Pricing和General是同层级的Tab子路由，可通过自定义路由复用策略，让Pricing路由离开时不销毁组件实例，返回时直接复用缓存实例，所有页面状态会自然保留。

1. 新建路由复用策略：

// cache-route.strategy.ts
import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';

@Injectable()
export class CacheRouteStrategy implements RouteReuseStrategy {
  private cacheHandles = new Map<string, DetachedRouteHandle>();

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return !!route.data['keepAlive'];
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const routeKey = route.pathFromRoot.map(seg => seg.url.join('/')).join('|');
    if (route.data['keepAlive']) this.cacheHandles.set(routeKey, handle);
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const routeKey = route.pathFromRoot.map(seg => seg.url.join('/')).join('|');
    return !!route.data['keepAlive'] && this.cacheHandles.has(routeKey);
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    const routeKey = route.pathFromRoot.map(seg => seg.url.join('/')).join('|');
    return this.cacheHandles.get(routeKey) || null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

2. 在根模块注册策略：

// app.module.ts
@NgModule({
  // ...其他模块、组件声明
  providers: [
    { provide: RouteReuseStrategy, useClass: CacheRouteStrategy }
  ]
})

3. 给需要缓存的Pricing路由加标记：

const routes: Routes = [
  // ...其他路由配置
  {
    path: 'pricing',
    component: PricingComponent,
    data: { keepAlive: true }
  }
]

注意：该方案会缓存整个组件实例，包含滚动位置、所有临时状态，仅适合固定Tab切换场景，不适合跨多级页面跳转的场景，过多缓存会占用额外内存。

方案3：浏览器本地存储（适配刷新页面也需保留草稿的场景） #

如果需要用户刷新页面也不丢失编辑中的状态，可将草稿存储在sessionStorage/localStorage中，逻辑和共享服务方案一致：

• 表单值变更时，将状态序列化为JSON存入存储
• 组件初始化时从存储读取草稿回填
• 提交/取消编辑时清除对应存储项即可
  核心存储逻辑示例：

// 存草稿
sessionStorage.setItem('pricingDraft', JSON.stringify({
  bothMandatory: this.active.bothMandatory,
  acceptBnb: this.active.acceptBnb,
  acceptCoin: this.active.acceptCoin,
  bnbPrice: this.bnbPrice,
  coinPrice: this.coinPrice
}));

// 读草稿
const draftStr = sessionStorage.getItem('pricingDraft');
if (draftStr) {
  const savedState = JSON.parse(draftStr);
  // 回填逻辑和服务方案一致
}

// 清空草稿
sessionStorage.removeItem('pricingDraft');

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