Angular：如何根据条件阻止 RouteReuseStrategy？

Question

我试图根据某些条件阻止 RouteReuseStrategy，但这没有发生。我的路线名称为

comp-a

，它有两种不同的调用方式。一次来自后退按钮，另一次来自标题中的按钮。

案例一： 如果组件 A 发生了一些事情，然后用户转到组件 B，然后用户单击后退按钮，则数据应该保留在组件 A 中。这种情况通过使用

RouteReuseStrategy

完美实现。

案例2： 如果组件 A 发生了一些事情，然后用户转到组件 B，并且用户单击标题中的按钮，那么当用户登陆组件 A 时，页面应该从头开始加载，即

ngOnInit()

应该被调用。

我的问题是案例 2 不起作用。

我尝试在路线中传递数据并从

ActivatedRouteSnapshot

函数中的

shouldDetach()

访问它，但这没有帮助。我参考了这里。

在 app-routing.module.ts，

const route: Routes = [
  { path: 'comp-a', component: CompAComponent, data: { test: true } }
];

在 app.component.ts

// Click event on "Goto Comp A from Comp B" button
navigate() {
  this.router.navigate(['../comp-a'], { state: { data: { test: false } } });
}

在 custom-reuse-strategy.ts，

shouldDetach(route: ActivatedRouteSnapshot) {
  return route.routeConfig?.path === 'comp-a' && (route.data as any)?.test; // I've accessed "test" variable here
}

我已经在这个 stackblitz 示例中尝试过了。

在上面的示例中，按钮

Goto Comp A from Comp B

用于 Case 2 示例，按钮

Go to Comp B

用于 Case 1。

我应该如何修改路由重用代码或者是否有其他方法可以实现这一点？

Answer 1

是的，应该可以实现，但只需在 stackblitz 示例中进行一些修改即可。

在 app-routing.module.ts

const routes: Routes = [
  { path: 'comp-a', component: CompAComponent, data: { test: true } },
  { path: 'comp-b', component: CompBComponent },
];

在 app.component.ts

navigateFromHeader() {
  this.router.navigate(['comp-a'], { state: { fromHeader: true } });
}

navigateFromBack() {
  this.router.navigate(['comp-a'], { state: { fromHeader: false } });
}

在 custom-reuse-strategy.ts，

shouldDetach(route: ActivatedRouteSnapshot): boolean {
  return route.data?.test || false;
}

shouldAttach(route: ActivatedRouteSnapshot): boolean {
 const fromHeader = history.state?.fromHeader;
  if (fromHeader) { 
    this.storedRoutes[route.routeConfig?.path || ''] = null;
     return false;
  } else {
    return !!this.storedRoutes[route.routeConfig?.path || ''];
  }
}