相关疑难解决方法(0)

我正在尝试实现这个RouteReuseStrategy课程.当我导航到顶级路径时,它工作正常.

一旦路径有子路径并导航到子路径,然后导航回顶级路径我收到以下错误:

错误:未捕获(在承诺中):错误:无法重新附加从其他路径创建的ActivatedRouteSnapshot

我创建了一个用于演示错误的plunker.我发现在IE 11中,plunker不起作用,请在最新版本的Chrome中查看

重现错误的步骤:

步骤1:

第2步

第三步:

第4步

您可以在控制台中查看错误:

我已经尝试了本文中的实现

export class CustomReuseStrategy implements RouteReuseStrategy {

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

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldDetach', route);
        return true;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.debug('CustomReuseStrategy:store', route, handle);
        this.handlers[route.routeConfig.path] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldAttach', route);
        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.debug('CustomReuseStrategy:retrieve', route);
        if (!route.routeConfig) return null;
        return this.handlers[route.routeConfig.path];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, …

我尝试在我的angular2项目中使用自定义重用策略,但我发现它不适用于延迟模块加载.谁知道这个？我的项目是角度2.6.4

重用strategy.ts

import {RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle} from "@angular/router";

export class CustomReuseStrategy implements RouteReuseStrategy {

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

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldDetach', route);
        return true;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.debug('CustomReuseStrategy:store', route, handle);
        this.handlers[route.routeConfig.path] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldAttach', route);
        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.debug('CustomReuseStrategy:retrieve', route);
        if (!route.routeConfig) return null;
        return this.handlers[route.routeConfig.path];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
        return …

当我导航回相同的组件时,我开始了解Sticky Routes重新附加早期的组件数据.我已经通过查看此https://www.softwarearchitekt.at/post/2016/12/02/sticky-实现了一个演示 routes-in-angular-2-3-with-routereusestrategy.aspx 博客https://plnkr.co/edit/KVlRi9PtPeOpvn8bECBi?p=preview ...是否可以应用条件以便routerreusestrategy仅适用于少数组件？

有没有办法RouteReuseStrategy只针对特定路线实施？

这意味着每个路由都有子代,获得自己的自定义实现RouteReuseStrategy,并且只有在激活特定"树"中的路径时才触发其方法.

我目前使用这个答案中的代码,但是如果可能的话我想用上面的逻辑扩展它.

假设我有两个Angular 2组件：ComponentA和ComponentB。我希望能够从ComponentA导航到ComponentB，然后最终回到ComponentA，而不必重新初始化ComponentA。

在当前的Angular 2 Router实现中，每次我离开某个组件时，该组件都会被破坏，并且下次我导航至该组件时必须重新创建该组件。

我知道我可以通过使用Service来保留组件的状态，但这似乎比实际解决方案更像是一种解决方法。有没有办法解决？

这是我的懒惰加载子模块:

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(acnpRoutes),
    ....
  ],
  declarations: [...],
  providers: [
    {provide: RouteReuseStrategy, useClass: ACNPReuseStrategy}
  ]
})
export class AddCustomerNaturalPersonModule {
}

路线:

const acnpRoutes: Routes = [
  {
    path: '',
    component: AddCustomerNaturalPersonComponent,
    children: [
      {
        path: 'stepOne',
        component: ACNPStepOneComponent
      },
      {
        path: 'stepTwo',
        component: ACNPStepTwoComponent
      },
    ]
  }
]

和ACPNReuseStrategy:

export class ACNPReuseStrategy implements RouteReuseStrategy {
  handlers: {[key: string]: DetachedRouteHandle} = {}

  shouldDetach(route: ActivatedRouteSnapshot): boolean  {
    console.log(1)
    return true;
  }

  store(route: ActivatedRouteSnapshot, handle: {}): void {
    console.log(2)
  } …

在我的 Angular 5 应用程序中，用户可以导航到使用相同路线但具有不同参数的路线。例如，他们可能从 导航/page/1到/page/2。

我希望这个导航能够触发路由动画，但它没有。如何使路由器动画在这两条路线之间发生？

（我已经明白，与大多数路线更改不同，此导航不会破坏并创建新的PageComponent。解决方案是否改变此行为对我来说并不重要。）

这是一个重现我的问题的最小应用程序。

我有一个<iframe>内部有一个元素的组件。

该组件被称为路线。

当调用组件时，<iframe>元素会重新加载内容，但我只需要加载该内容一次。为此，我需要取消该组件的销毁。

我尝试在调用时将其移动<iframe>到<body>元素onDestroy，并在再次调用该组件时重用它，但是当您将 an 移动<iframe>到另一个父级时，他的内容将重新加载。

有人知道如何做到这一点吗？

我实现RouteReuseStrategy建议在这里也更新了一下,因为上shouldAttach的routeConfig.path是空的,而处理器没有缓存.我有@angular/router: 3.4.7.

import {RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot} from "@angular/router"

export class CustomReuseStrategy implements RouteReuseStrategy {

    handlers: {[key: string]: DetachedRouteHandle} = {};
    currentPath: string = '';

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return true
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        this.handlers[route.routeConfig.path] = handle
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        // todo route.routeConfig.path was empty
        if (!!this.currentPath && !!this.handlers[this.currentPath]) {
            route.routeConfig.path = this.currentPath;
            return true
        } else {
            return false
        }
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle …