## ルートを選択的に保存および破棄して、Angular 2 ルーティングのパフォーマンスを最適化するにはどうすればよいですか?

Angular 2 の RouteReuseStrategy を使用した特定のルートの保存と破棄

問題点

Angular 2 アプリケーションでルーティングを実装する場合、特定のルートが必要になる場合があります。再アクセス時のレンダリングを高速化するためにメモリに保存されます。ただし、リソースの詳細ビューなど、一部のルートでは、リソースを節約するためにメモリからルートを破棄した方がよい場合があります。

ソリューションの概要

Angular 2 は、ルートを制御する RouteReuseStrategy インターフェイスを提供します。ルートの保存と取得。このインターフェイスを実装し、Angular モジュールで提供することにより、ルートをいつ保存するか、いつ破棄するかについてのカスタム動作を定義できます。

RouteReuseStrategy の実装

shouldDetach

shouldDetach メソッドでは、ルートを保存する必要があるかどうかを決定できます。 true を返した場合、Angular はルートを保存します。通常、ルート パスをチェックし、事前定義された一連の基準に基づいてルート パスを保存するかどうかを決定します。

store

shouldDetach が true を返した場合、store メソッドが呼び出されて、ルート。このメソッドを実装すると、後で再利用するために使用される ActivatedRouteSnapshot と DetachedRouteHandle を保存できます。

shouldAttach

shouldAttach メソッドでは、ルートを再利用する必要があるかどうかを確認できます。 true を返す場合、Angular は保存されているバージョンのルートを使用し、新しいルートを作成しません。 ActivatedRouteSnapshot と queryParams を使用して、受信ルートと保存されたルートのプロパティを比較し、それらが一致するかどうかを判断できます。

retrieve

shouldAttach が true を返した場合、retrieve メソッドが呼び出され、保存されたバージョンを取得します。ルートの。ストアによって保存された DetachedRouteHandle を使用して、正しいルートを識別して返すことができます。

使用例

たとえば、検索結果ページを保存するが、個々のルートは保存しないアプリケーションを考えてみましょう。リソースの詳細ページ。実装方法は次のとおりです:

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

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes: { [key: string]: RouteStorageObject } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    if (route.routeConfig.path === 'search/:term') {
      return true;
    }
    return false;
  }

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

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    if (this.storedRoutes.hasOwnProperty(route.routeConfig.path)) {
      return true;
    }
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (shouldAttach(route)) {
      return this.storedRoutes[route.routeConfig.path].handle;
    }
    return null;
  }

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

AppModule 内:

<code class="typescript">@NgModule({
  [...],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppModule {}</code>

この戦略を提供することで、Angular は定義したルールに基づいてルートの保存と取得を自動的に管理します。これにより、アプリケーションのパフォーマンスが最適化されます。

以上が## ルートを選択的に保存および破棄して、Angular 2 ルーティングのパフォーマンスを最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。