如何为Angular路由添加可自定义的可写数据？

我平时是这么声明路由的：

{
   path: 'datasel/:datasel',
   component: aComponent,
   resolve: { model: AWATranslationLoaderResolver },
   data: { resolvedata: 'Assets', reuse: true },
}

能不能给路由加可写数据？我想在aComponent里修改这个数据，让路由复用策略能感知组件内发生的重要事件。

我期望在组件里实现类似这样的逻辑：

this.router.events.subscribe(ev => {
    if (ev instanceof ActivationEnd &&
        Object.is(ev?.snapshot?.component, aComponent)) {
        ev.snapshot.customData.inportantEvent = true;
    }
});

然后在自定义复用类里读取这个数据：

shouldAttach(route: ActivatedRouteSnapshot): boolean {
    console.log(route.customData.importantEvent);
    return !!this.handlers[this.getUrl(route)];
}

直接修改ActivatedRouteSnapshot上的自定义属性不是靠谱的做法——因为路由快照本身是不可变对象，Angular设计它的目的就是记录路由激活时的静态状态，强行修改可能引发不可预测的副作用，比如快照复用、状态不一致等问题。

给你两个可行的替代方案：

方案一：用服务共享状态 #

创建一个专门的路由状态服务，用来存储组件触发的事件标记，让复用策略通过这个服务读取状态：

1. 先创建状态服务：

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

@Injectable({ providedIn: 'root' })
export class RouteStateService {
  private eventMap = new Map<string, boolean>();

  // 标记路由发生重要事件
  markImportantEvent(route: ActivatedRouteSnapshot): void {
    const key = this.getRouteKey(route);
    this.eventMap.set(key, true);
  }

  // 读取路由事件状态
  hasImportantEvent(route: ActivatedRouteSnapshot): boolean {
    const key = this.getRouteKey(route);
    return this.eventMap.get(key) ?? false;
  }

  // 清除路由事件状态（可选，比如组件销毁时）
  clearEvent(route: ActivatedRouteSnapshot): void {
    const key = this.getRouteKey(route);
    this.eventMap.delete(key);
  }

  // 生成唯一路由标识（用路径参数+组件名组合）
  private getRouteKey(route: ActivatedRouteSnapshot): string {
    return `${route.component?.name}-${route.params['datasel']}`;
  }
}

2. 在组件里调用服务标记事件：

import { Component, OnDestroy } from '@angular/core';
import { Router, ActivationEnd } from '@angular/router';
import { RouteStateService } from './route-state.service';
import { aComponent } from './a.component';

@Component({...})
export class aComponent implements OnDestroy {
  private eventSubscription;

  constructor(
    private router: Router,
    private routeStateService: RouteStateService,
    private route: ActivatedRoute
  ) {
    this.eventSubscription = this.router.events.subscribe(ev => {
      if (ev instanceof ActivationEnd && Object.is(ev.snapshot.component, aComponent)) {
        // 触发重要事件时调用
        this.routeStateService.markImportantEvent(this.route.snapshot);
      }
    });
  }

  ngOnDestroy(): void {
    this.eventSubscription.unsubscribe();
    this.routeStateService.clearEvent(this.route.snapshot);
  }
}

3. 在自定义复用策略里读取状态：

import { RouteReuseStrategy, ActivatedRouteSnapshot } from '@angular/router';
import { RouteStateService } from './route-state.service';

export class CustomReuseStrategy implements RouteReuseStrategy {
  private handlers = new Map<string, any>();

  constructor(private routeStateService: RouteStateService) {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const hasEvent = this.routeStateService.hasImportantEvent(route);
    console.log(hasEvent);
    // 这里可以根据事件状态调整复用逻辑
    return !!this.handlers[this.getUrl(route)];
  }

  // 其他RouteReuseStrategy方法实现...
  private getUrl(route: ActivatedRouteSnapshot): string {
    return route.pathFromRoot.map(r => r.url.join('/')).join('/');
  }
}

方案二：扩展路由data属性（通过Mutable包装） #

虽然路由的data对象本身是不可变的，但你可以在data里放一个可变的对象容器，这样就能在组件里修改容器内的属性：

1. 修改路由声明：

{
   path: 'datasel/:datasel',
   component: aComponent,
   resolve: { model: AWATranslationLoaderResolver },
   data: { 
     resolvedata: 'Assets', 
     reuse: true,
     // 添加一个可变的状态容器
     mutableState: { importantEvent: false }
   },
}

2. 在组件里修改容器内的属性：

import { Component } from '@angular/core';
import { Router, ActivationEnd } from '@angular/router';
import { aComponent } from './a.component';

@Component({...})
export class aComponent {
  constructor(private router: Router) {
    this.router.events.subscribe(ev => {
      if (ev instanceof ActivationEnd && Object.is(ev.snapshot.component, aComponent)) {
        // 修改mutableState里的属性
        ev.snapshot.data.mutableState.importantEvent = true;
      }
    });
  }
}

3. 在复用策略里读取：

shouldAttach(route: ActivatedRouteSnapshot): boolean {
  console.log(route.data.mutableState.importantEvent);
  return !!this.handlers[this.getUrl(route)];
}

这个方案更简单，但要注意：data里的mutableState会被同一路由的所有快照共享（如果路由复用的话），所以要在合适的时机重置状态（比如组件初始化、销毁时），避免状态污染。

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