成功提交表单后，如何重新初始化可重复使用的路线？

Question

我有以下路径：

{
   path: 'buyer/form',
   component: BuyerFormComponent,
   canActivate: [AuthGuard, RoleGuard],
   data: { reuse: true, expectedRole: 'Buyer' }
},
{
   path: 'buyer/form/review',
   component: BuyerFormReviewComponent,
   canActivate: [AuthGuard, RoleGuard],
   data: { expectedRole: 'Buyer' }
}

我的buyer/form组件是可重用的路由，因此当我点击buyer/form/review的后退按钮时，如果需要，我仍然能够看到表单输入值并进行更改，然后继续buyer/form/review再次查看。

buyer/form/review中有一个函数可以提交我从buyer/form组件中获得的输入值。

我的问题是，提交后返回buyer/form时，输入值仍然存在。在buyer/form/review中成功提交表单后，我如何杀死/破坏可重复使用的路线？

有没有一种方法可以查询buyer/form中的特定buyer/form/review路由快照，以便在下次访问该路由时以编程方式重置/破坏/重新初始化buyer/form？

以下是我的RouteReuseStrategy：

import {
  RouteReuseStrategy,
  ActivatedRouteSnapshot,
  DetachedRouteHandle,
  RouterModule,
  Routes,
  UrlSegment
} from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {

  private handlers: { [key: string]: DetachedRouteHandle } = {};

  /**
   * Determines if this route (and its subtree) should be detached to be reused later
   * @param route
   * route
   */
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    if (!route.routeConfig || route.routeConfig.loadChildren) {
      return false;
    }
    /** Whether this route should be re used or not */
    let shouldReuse = false;
    console.log('[router-reuse] checking if this route should be re used or not', route);
    if (route.routeConfig.data) {
      route.routeConfig.data.reuse ? shouldReuse = true : shouldReuse = false;
    }

    return shouldReuse;
  }

  /**
   * Stores the detached route.
   */
  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
    console.log('[router-reuse] storing handler');
    if (handler) {
      this.handlers[this.getUrl(route)] = handler;
    }
  }

  /**
   * Determines if this route (and its subtree) should be reattached
   * @param route Stores the detached route.
   */
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    console.log('[router-reuse] checking if it should be re attached');
    return !!this.handlers[this.getUrl(route)];
  }

  /**
   * Retrieves the previously stored route
   */
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (!route.routeConfig || route.routeConfig.loadChildren) {
      return null;
    }

    return this.handlers[this.getUrl(route)];
  }

  /**
   * Determines if a route should be reused
   * @param future
   * future
   * @param current
   * current
   */
  shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    /** We only want to reuse the route if the data of the route config contains a reuse true boolean */
    let reUseUrl = false;

    if (future.routeConfig) {
      if (future.routeConfig.data) {
        reUseUrl = future.routeConfig.data.reuse;
      }
    }

    /**
     * Default reuse strategy by angular assers based on the following condition
     * @see https://github.com/angular/angular/blob/4.4.6/packages/router/src/route_reuse_strategy.ts#L67
     */
    const defaultReuse = (future.routeConfig === current.routeConfig);

    // If either of our reuseUrl and default Url are true, we want to reuse the route
    //
    return reUseUrl || defaultReuse;
  }

  /**
   * Returns a url for the current route
   * @param route
   * route
   */
  getUrl(route: ActivatedRouteSnapshot): string {
    /** The url we are going to return */
    if (route.routeConfig) {
      const url = route.routeConfig.path;
      console.log('[router-reuse] returning url', url);

      return url;
    }
  }
}