如何防止在 Angular 2 中使用 RouteReuseStrategy 的 shouldDetach 方法存储特定路由？

如何在 Angular 2 中针对特定路由实现 RouteReuseStrategy 的 shouldDetach

路由是任何单页应用程序的重要组成部分，Angular 2 的路由功能相当强大。 Angular 2 路由器最有用的功能之一是能够存储路由状态，以便以后重用。这是通过实现 RouteReuseStrategy 接口来完成的。

RouteReuseStrategy 接口有许多方法可以实现来自定义路由的存储和重用方式。最重要的方法之一是 shouldDetach，它用于确定当用户离开某个路由时是否应该存储该路由。

默认情况下，Angular 2 将存储所有路由的状态导航至。但是，有时您可能希望阻止存储某些路由。例如，您可能不想存储显示模式对话框或加载屏幕的路由的状态。

要防止存储路由，您可以实现 shouldDetach 方法并返回 false。这将告诉 Angular 2 当用户离开路由时不要存储路由的状态。

这里是如何实现 shouldDetach 方法的示例：

<code class="typescript">import { Injectable } from '@angular/core';
import { RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';

@Injectable()
export class CustomRouteReuseStrategy implements RouteReuseStrategy {

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // Return `false` to prevent this route from being stored.
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }
}</code>

使用这个自定义路由重用策略，您可以在 NgModule 中提供它，如下所示：

<code class="typescript">import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: '', component: AppComponent }
    ], { useHash: true })
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}</code>

现在，只要用户导航离开路线，就会调用自定义路由重用策略的 shouldDetach 方法。您可以使用此方法来确定是否应该存储路线。

以上是如何防止在 Angular 2 中使用 RouteReuseStrategy 的 shouldDetach 方法存储特定路由？的详细内容。更多信息请关注PHP中文网其他相关文章！