Angular 自定义重用策略重新加载该组件

Posted 2023-02-23

【中文标题】Angular 自定义重用策略重新加载该组件

【英文标题】：Angular custom reuse strategy reload that component

【发布时间】：2018-07-02 00:04:02

【问题描述】：

自定义重用策略存在问题，我一直在研究，但找不到任何解决方案。也许你的一个可以帮助我。

所以。我实现了我的应用程序自定义重用策略。它工作得很好，另外我添加了一个我不想存储的地址列表。这是代码：

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

export class CustomRoutingReuse implements RouteReuseStrategy
handlers: [key: string]: DetachedRouteHandle = ;
private ignoredRoutes : String[] = [
    'module_one/:id',
    'module_one/:id/mod',
    'module_one/:id/something_else',
];

shouldDetach(route: ActivatedRouteSnapshot): boolean 
    //console.debug('CustomReuseStrategy:shouldDetach', route);
    if(this.ignoredRoutes.indexOf(route.routeConfig.path) > -1)
        return false;
    else 
        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 future.routeConfig === curr.routeConfig;

现在想象一下。列表中的第一条路线：

module_one/:id

向我展示某事的详细信息。第二个：

module_one/:id/mod

允许我从第一条路由更改一些详细信息的值，然后将它们发送到后端并插入数据库。

现在...我不想要第一条路线。它是一个可以处理 5 多个内部的组件。而当它被记住时，在更改值并返回到它之后，该值仍然存在，因为整个组件都被记住了。

这有点乱，我知道。这就是我要找的东西：

我想在 customReuseStrategy 中列一个列表，例如：

private ignoredComponents : String[] = [
'myModuleOneComponent'];

并按组件名称分离组件。

或者我需要一种方法来告诉组件重新加载自己，或者在它被存储后返回它后执行我的指令。

【参考方案1】：

对于遇到此问题的任何人，您可以在route.component.name 中找到组件名称

shouldDetach(route: ActivatedRouteSnapshot): boolean 
  return this.ignoredComponents.indexOf(route.component.name) === -1;