角度 - 清除具有路由条件的存储路由(路由重用策略)

Question

我正在使用RouteReuseStrategy来存储具有某些条件的路由。我想从另一个表单访问表单，而不会丢失第一个表单中填充的输入，用于功能上下文。

我有两个问题：

1(目前，我在激活路由数据属性中设置了一个属性。我认为这不是一件好事，因为数据属性没有可用的设置器。我怎样才能正确地做到这一点，而对 URL 没有条件？

2( 如果我单击应用程序的菜单项，我想使用路由重用策略重置所有存储的路由。我怎样才能在路线中加入该条件？

我当前的代码：

    import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';
import { AuthComponent } from '../auth/auth.component';
export class CustomReuseStrategy implements RouteReuseStrategy {
  handlers: { [key: string]: DetachedRouteHandle } = {};
  /**
   * Determines if this route (and its subtree) should be detached to be reused later.
   * Fired when shouldReuseRoute returns false
   * If it returns true, the method store will be fired.
   * @param route current route
   */
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    const url: string = this.getRouteIdentifier(route);
    if (route.data['shouldReuseRoute']) {
      return true;
    } else {
      delete this.handlers[url];
      return false;
    }
  }
  /**
   * Determines the action we want to do when storing a route.
   * Fired when shouldDeatch returns true.
   * @param route : current route
   * @param handle : identifies the stored component
   */
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const url: string = this.getRouteIdentifier(route);
    this.handlers[url] = handle;
  }
  /**
   * Determines if the current route should be reused from the stored components or not.
   * Fired when shouldReuseRoute returns false
   * @param route current route
   */
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    // Reset all the stored routes if we're on the AuthComponent
    if (route.component === AuthComponent) {
      this.handlers = {};
      return false;
    }
    const url: string = this.getRouteIdentifier(route);
    return !!this.handlers[url];
  }
  /**
   * Returns the stored route we want to reuse..
   * Fired when shouldAttach returns true
   * @param route current route
   */
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    const url: string = this.getRouteIdentifier(route);
    if (!route.routeConfig || !this.handlers[url]) {
      return null;
    } else {
      return this.handlers[url];
    }
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    const currentUrl: string = this.getRouteIdentifier(curr);
    const futureUrl: string = this.getRouteIdentifier(future);
    return currentUrl === futureUrl;
  }
  /**
   * Returns the unique identifier for each route
   * @param route: route to identify
   */
  getRouteIdentifier(route: ActivatedRouteSnapshot): string {
    return route.url.join('/');
  }
}

多谢。

Answer 1

对不起，如果我错过了理解这个问题。

要存储数据，您可以通过添加数据属性在 routeting.module.ts 中执行此操作。

const routes: Routes = [
  {
    path: '',
    component: MyComponent,
    data: { shouldReuseRoute: true }
  }
];

然后，您只需为每个路由设置 true 或 false，在这里决定存储或不存储哪些路径。

通过存储它，您将重用该路由，然后每次都会重新创建组件。

编辑：您可以在数据属性下的激活路由中访问此数据。

store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle) {
  let data = route.data.shouldReuseRoute; // here is the data attribute
  // referenced in the comments, to get a property dynamically from the component itself
  let componentVar = handle['componentRef']['instance']['shouldReuseRoute'] // must be created in the component view
}