Angular 2/4 : 如何在不重新创建组件的情况下更改路线

Question

我有几个指向同一组件的路径（即 /projects、/projects/create、/projects/:id 和 children，都指向我的 ProjectComponent）。在 /projects/:id 之间导航时，仅更改 :id 一切正常，我可以订阅参数并相应地更新我的内容，但是当我从 /projects 导航到 /projects/create 或 /projects/:id 时，组件已重新创建。

有没有办法在不重新创建的情况下导航到指向同一组件的路由？

Answer 1

您应该实施自定义 RouteReuseStrategy

创建实现 RouteReuseStrategy:

的服务

export class CustomReuseStrategy implements RouteReuseStrategy {

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

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

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

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

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

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

并将此提供商添加到 @NgModule:

providers: [
    {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
]

您可以将 CustomReuseStrategy 调整为仅具有可重复使用组件的某些路径，但我会留给您来了解具体方法。

source

Angular 2/4 : 如何在不重新创建组件的情况下更改路线

Angular 2/4 : how to change route without recreating the component

javascript

ngroute

angular