Question

我有一个组件MainPageComponent。当用户点击＆＃34;主页＆＃34;从顶部菜单中，我的自定义RouteReuseStrategy从内存中恢复＆＃34;主页面＆＃34; -route，用户选择他离开的位置。如何在已恢复的组件的代码中知道它何时被恢复并恢复活着？

我认为没有调用ngOnInit，因为这不是组件init，但它已经启动并运行。在RouteReuseStrategy还原时，是否有一些方法可以在组件上调用？

我不知道是否相关，但这里是我使用的自定义RouteReuseStrategy组件。＆＃34;主页面的路线＆＃34;这将在routesToStore-array中 - 这些路由根据请求从内存中恢复。

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

interface RouteStorageObject {
    snapshot: ActivatedRouteSnapshot;
    handle: DetachedRouteHandle;
}

export class CustomReuseStrategy implements RouteReuseStrategy {
    constructor() {
        // Determine which routes to preserve
        this.routesToStore = ["search", "favorites", "explore"];
    }

    routesToStore: string[];
    storedRoutes: { [key: string]: RouteStorageObject } = {}

    // If returns false, user is let to leave current view
    shouldReuseRoute (future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
        // Return false if navigating to another route than current
        return future.routeConfig === current.routeConfig;
    }

    // Should the route be stored?
    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        // Keep state of all routes by always returning true
        if (this.routesToStore.indexOf(route.routeConfig.path) > -1)
            return true;

        return false;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        let storedRoute: RouteStorageObject = {
            snapshot: route,
            handle: handle
        };

        this.storedRoutes[route.routeConfig.path] = storedRoute;
    }

    // Should the component state be restored?
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        // If the route has been stored before
        let canAttach: boolean = !!route.routeConfig && !!this.storedRoutes[route.routeConfig.path];

        if (canAttach)
            return true;

        return false;        
    }

    // Retrieve the component state
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {

        if (!route.routeConfig || !this.storedRoutes[route.routeConfig.path]) return null;

        return this.storedRoutes[route.routeConfig.path].handle;

    }
}

Answer 1

您可以在<router-outlet>上使用(activate)事件。

https://netbasal.com/angular-2-router-routeroutlet-events-8b0803d88082

因此请在您的app.component.html页面上处理事件：

<router-outlet (activate)="onActivate($event)"></router-outlet>

在您的app.component.ts中：

// yes - the $event is the component itself 
onActivate(component)
{
    if (component["onActivate"])
    {
        component.onActivate();
    }

    // [optional] tell your shared service 
    this.pageManagerService.activeComponent.next(component);
}

我创建了一个简单的页面管理器服务，当激活新组件时会通知该服务。这是共享的，因此我可以在任何需要的地方注入它。它根据当前组件，页面的背景颜色等来控制菜单的显示方式。

（与@ Su-Au Hwang指出的问题类似的想法）

Answer 2

一种解决方法（直到通过适当的钩子增强RouteReuseStrategy来支持这种情况）是侦听组件中的NavigationEnd：

ngOnInit() {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd && event.url == thisUrl) {
      // route is restored
    }
  });
}

当RouteReuseStrategy恢复时，angular2-component如何知道它是否处于活动状态？

2 个答案: