Question

我有一个Angular 2项目，在这里我实现了一个自定义重用策略，该策略存储分离的路由并在它们已经存在时对其进行重用。

这很好，但是仅当用户单击导航器的“后退”按钮时才使用此机制，而如果用户直接单击我的页面或菜单中的某些链接则不希望使用这种机制。

目的是，如果用户来自“返回”按钮，则该路线将在他离开时显示，但如果用户单击链接或菜单，则将重新加载页面，并再次获取服务器中的数据！ / p>

我试图查看ActivatedRouteSnapshot中是否存在用户来自历史记录而不是直接来自链接（带有router.navigate）的信息，但是我什么也看不到。

有没有办法实现我想要的？

Answer 1

您可以检测到执行了后退按钮的操作：

constructor(location: LocationStrategy) {
  location.onPopState(() => {
    console.log('Back button pressed!');
    console.log(window.location);
  });
}

您应该添加@Injectable()来注入LocationStrategy。

Answer 2

万一有人想知道如何准确地实现这一目标，这里有一些更详细的代码。

就像@youri一样，您将以下代码添加到route-custom-strategy.ts中：

@Injectable()

export class CustomRouteReuseStategy implements RouteReuseStrategy {

    constructor(location: LocationStrategy) {
        location.onPopState(() => {
            this.back = true
            console.log('Back button pressed!', this.back);
        });
    }

    // Back-navigation monitoring
    back: boolean = false

   // ------------ Your RouteReuseStrategy code ---------------
}

记住要添加Injectable()。

现在，您已将back变量设置为标志，以供用户向后导航（或向前导航-请记住onPopState()会针对所有弹出状态触发），我们需要确保{{ 1}}仅在后退（或前进）导航上触发。

我假设您的shouldAttach代码看起来像这样：

shouldAttach

因此，您只需要添加一个检查我们的shouldAttach(route: ActivatedRouteSnapshot): boolean { const storedObject = this.storedRoutes[id]; const canAttach = !!route.routeConfig && !!storedObject; if (!canAttach) return false const paramsMatch = this.compareObjects(route.params, storedObject.snapshot.params); const queryParamsMatch = this.compareObjects(route.queryParams, storedObject.snapshot.queryParams); return paramsMatch && queryParamsMatch; }布尔值的参数和一行代码即可将该值重置为this.back，以捕获下一个反向导航。上面的代码变为：

false

就是这样。现在，您将仅在后退/前进导航中重复使用存储的页面，并且通过单击路线进行导航时将加载新的组件。

仅在用户返回（历史记录）时才如何实现RouteReuseStrategy？

2 个答案: