Question

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

我有两个问题：

1）目前，我在ActivatedRoute数据属性中设置了一个属性。我认为这不是一件好事，因为数据属性没有可用的setter。如何在没有条件的情况下正确地执行此操作？

2）如果我点击我的应用程序的菜单项，我想用RouteReuseStrategy重置所有存储的路径。我怎样才能将这个条件纳入路线？

我目前的代码：

    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

很抱歉，如果我错过了解问题。

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

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

然后你只需为每条路线设置true或false，这里决定存储或不存储的路径。

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

编辑：您可以在数据属性下的ActivatedRoute内访问此数据。

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
}

Angular - 清除路由中具有条件的存储路由（RouteReuseStrategy）

1 个答案: