Question

我需要知道一种方法，当我离开屏幕并导航到另一个屏幕时，将组件的当前状态保持在Angular中。

在我的组件中，我有一个计数器，用于显示用户当前正在执行的服务的持续时间，还有一个窗体，其中包含有关正在执行的服务的若干信息。

当我退出屏幕显示并导航到另一个屏幕时，计数器无法重置，并且整个屏幕显示应该与我离开并导航到另一条路线之前的显示相同。

我也希望在关闭选项卡并再次打开时保持状态，即使我没有打开应用程序，持续时间也会继续。 < / p>

仅当我单击完成按钮时，持续时间才应该停止，我可以关闭应用程序并再次打开，带有信息的屏幕状态将始终保持不变，并且持续时间直到我结束出席之后才停止。

示例：

关闭应用程序之前的持续时间。 00:10:00

10分钟后关闭应用程序并再次打开。 00:20:00

我该怎么做？从Angular组件的生命周期开始？

Answer 1

您需要实现自定义RouteReuseStrategy

app-routing-cache.ts

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

export class AppRoutingCache implements RouteReuseStrategy {
    routesToCache: string[] = ['my-route1']; // add your routes to cache here 
    storedRouteHandles = new Map<string, DetachedRouteHandle>();

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return this.routesToCache.indexOf(route.routeConfig.path) > -1;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        this.storedRouteHandles.set(route.routeConfig.path, handle);
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return this.storedRouteHandles.has(route.routeConfig.path);
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        return this.storedRouteHandles.get(route.routeConfig.path);
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig;
    }
}

在app.moudle中

providers: [
  ...
  { provide: RouteReuseStrategy, useClass: AppRoutingCache }

]

使用Angular 7保持屏幕和数据状态

1 个答案: