Angular ルーティングで戦略を再利用する方法

1. はじめに

ルーティングは、実行中にコンポーネントに対してステートレスに動作します。つまり、ルーティングが終了すると、コンポーネントのステータスも削除されます。これは、ほとんどのシナリオで妥当です。

しかし、場合によっては、特別なニーズによって人々が半死状態になることもあります。これはすべてユーザー エクスペリエンスのためであり、ユーザーがモバイル端末でキーワードやそのようなリストを使用して商品を検索するという非常に一般的なシナリオです。死んでいるかどうかの判断は通常、自動次ページ アクションです。このとき、ユーザーが最終的に 2 ページ目にスクロールして、見たい製品が見つかると、製品の詳細ページに誘導され、バックします。 ..ユーザーは混乱しています。

Angular ルーティングとコンポーネントは、最初から RouterModule.forRoot を通じて関係を形成します。ルートがヒットすると、ComponentFactoryResolver がコンポーネントの構築に使用されます。 。 RouterModule.forRoot 形成一种关系，当路由命中时利用 ComponentFactoryResolver 构建组件，这是路由的本质。

而每一个路由并不一定是一次性消费，Angular 利用 RouteReuseStrategy 贯穿路由状态并决定构建组件的方式；当然默认情况下（DefaultRouteReuseStrategy）像开头说的，一切都不进行任何处理。

RouteReuseStrategy 从2就已经是实验性，当前依然如此，这么久应该是可信任。

二、RouteReuseStrategy

RouteReuseStrategy 我称它为：路由复用策略；并不复杂，提供了几种办法通俗易懂的方法：

• shouldDetach 是否允许复用路由

• store 当路由离开时会触发，存储路由

• shouldAttach 是否允许还原路由

• retrieve 获取存储路由

• shouldReuseRoute 进入路由触发，是否同一路由时复用路由

这看起来就像是一个时间轴关系，用一种白话文像是这样：把路由 /list 设置为允许复用（shouldDetach），然后将路由快照存在 store 当中；当 shouldReuseRoute 成立时即：再次遇到 /list 路由后表示需要复用路由，先判断 shouldAttach 是否允许还原，最后从 retrieve 拿到路由快照并构建组件。

当理解这一原理时，假如我们拿开头搜索列表返回的问题就变得非常容易解决。

三、一个示例

诚如上面说明的，只需要实现 RouteReuseStrategy 接口即可自定义一个路由利用策略。

1、创建策略

import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';

export class SimpleReuseStrategy implements RouteReuseStrategy {

    _cacheRouters: { [key: string]: any } = {};

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return true;
    }
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        this._cacheRouters[route.routeConfig.path] = {
            snapshot: route,
            handle: handle
        };
    }
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!this._cacheRouters[route.routeConfig.path];
    }
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        return this._cacheRouters[route.routeConfig.path].handle;
    }
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig;
    }
}

定义一个 _cacheRouters 用于缓存数据（路由快照及当前组件实例对象）。

• shouldDetach 直接返回 true 表示对所有路由允许复用

• store 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象；path等同RouterModule.forRoot中的配置。

• shouldAttach 若 path 在缓存中有的都认为允许还原路由

• retrieve 从缓存中获取快照，若无则返回null

• shouldReuseRoute

  そして、各ルートは必ずしも 1 回限りの消費ではありません。もちろん、Angular は RouteReuseStrategy を使用してルーティング状態を実行し、コンポーネントの構築方法を決定します。最初は何も行われていません。 処理も行われません。

RouteReuseStrategy は 2 から実験的であり、今でもこのままであり、長い間信頼できるはずです。

2. RouteReuseStrategy

RouteReuseStrategy 私はこれをルート再利用戦略と呼んでいます。これは複雑ではなく、いくつかのわかりやすいメソッドを提供します。

• shouldDetach ルートの再利用を許可するかどうか

• store はルートが離れるときにトリガーされ、ルートを保存します

  shouldAttach ルート復元を許可するかどうか

• retrieve 保存されたルートを取得

• shouldReuseRoute ルートトリガーを入力し、同じルートを再利用するかどうか
  

  🎜🎜これはタイムラインの関係のように見えます。日常用語では次のようになります: 再利用を許可するようにルート /list を設定します ( shouldDetach)。 shouldReuseRoute が確立されたら、ルート スナップショットを store に保存します。再利用する必要がある場合は、/list ルートに再度遭遇した後に表現されます。ルートの場合、最初に shouldAttach で復元が許可されるかどうかを判断し、最後に retrieve からルート スナップショットを取得してコンポーネントをビルドします。 🎜🎜この原理を理解すると、最初に検索リストから返された問題を取り上げると、非常に簡単に解くことができます。 🎜🎜3. 例🎜🎜 上で説明したように、ルート使用戦略をカスタマイズするには、RouteReuseStrategy インターフェイスを実装するだけです。 🎜🎜1. 戦略を作成します🎜

  providers: [
    { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
  ]

  🎜 データ (ルーティング スナップショットと現在のコンポーネント インスタンス オブジェクト) をキャッシュするための _cacheRouters を定義します。 🎜
  • 🎜 shouldDetach は、すべてのルートでの再利用を許可するために true を直接返します🎜🎜
  • 🎜 store ルートが離れるときに起動します。パスをキーとして使用して、ルーティング スナップショットとコンポーネントの現在のインスタンス オブジェクトを保存します。このパスは RouterModule.forRoot の設定と同等です。 🎜🎜
  • 🎜 shouldAttach path がキャッシュ内にある場合、ルートの復元が許可されているとみなされます 🎜🎜
  • 🎜retrieve キャッシュからスナップショットを取得します。そうでない場合は、null を返します🎜🎜<li>🎜<code> shouldReuseRoute ルーティング トリガーを入力して、同じルートであるかどうかを判断します🎜🎜🎜🎜2.最後に、モジュールにポリシーを登録します: 🎜

    RouterModule.forRoot([
      { path: 'search', component: SearchComponent },
      { path: 'edit/:id', component: EditComponent }
    ])

    🎜 このようなルーティング設定があるとします: 🎜rrreee🎜 検索コンポーネントは検索アクションに使用され、検索結果に基づいて編集ページにジャンプします。保存後は、 に戻ります。最後の検索結果の状態 (コードのこの部分を投稿することに興味はありません。plnkr)。 🎜🎜4. 結論🎜🎜 上記は簡単な紹介です。実際には、スクロールバーの位置やキャッシュのクリーニングなど、再利用の判断はさらに複雑になります。 🎜🎜このルーティング再利用戦略メカニズムをうまく利用すると、Web エクスペリエンスの多くの問題を解決できます。 🎜🎜🎜🎜🎜🎜🎜

以上がAngular ルーティングで戦略を再利用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。