Angular 2 で RouteReuseStrategy の shouldDetach メソッドを使用して特定のルートが保存されないようにする方法は?

Angular 2 で特定のルートに RouteReuseStrategy の shouldDetach を実装する方法

ルーティングは単一ページ アプリケーションの重要な部分であり、Angular 2 のルーティング機能は非常に強力です。 Angular 2 のルーターの最も便利な機能の 1 つは、後で再利用できるようにルートの状態を保存できる機能です。これは、RouteReuseStrategy インターフェイスを実装することによって行われます。

RouteReuseStrategy インターフェイスには、ルートの保存方法と再利用方法をカスタマイズするために実装できるメソッドが多数あります。最も重要なメソッドの 1 つは 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 中国語 Web サイトの他の関連記事を参照してください。