Angular で特定のルートをデタッチするカスタム RouteReuseStrategy を実装する方法

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

Background

RouteReuseStrategy を使用すると、ナビゲーション時にコンポーネントを破棄するのではなく保持するように Angular に指示できます。

問題ステートメント

「/documents/:id」のような特定のルートではなく、「/documents」のようなルートの状態を保存したいと考えています。

解決策

組み込み RouteReuseStrategy を拡張し、適切なメソッドをオーバーライドすることでカスタム RouteReuseStrategy を実装します:

Angular のルーターからインポート

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

RouteReuseStrategy を実装するクラスを作成します

<code class="typescript">export class CustomRouteReuseStrategy implements RouteReuseStrategy {</code>

選択的ルート ストレージの 'ShouldDetach' をオーバーライドします

<code class="typescript">shouldDetach(route: ActivatedRouteSnapshot): boolean {
  return route.routeConfig?.path === '/documents/id';
}</code>

NgModule でカスタム ストラテジーを指定します

<code class="typescript">providers: [
  { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy },
]</code>

説明

• shouldDetach: ルートのストレージを制御します。保存したいルートに対して true を返します。このシナリオでは、「/documents」ルートのみを保存します。
• shouldAttach: 保存されたルートをいつ再利用するかを決定します。このメソッドが true を返した場合、Angular はコンポーネントを再作成するのではなく再利用します。この例では、このメソッドをオーバーライドしません。

追加メモ:

• この実装では、ユーザーのルート全体にわたって、各認定ルートの 1 つのインスタンスが保存されます。 session.
• shouldDetach を変更して、要件に基づいて保存するルートを制御することで、さらにカスタマイズできます。

以上がAngular で特定のルートをデタッチするカスタム RouteReuseStrategy を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。