web-dev-qa-db-ja.com

アウレリアの現在のページを再読み込み

私は Aurelia アプリケーションを使用しており、ユーザーは現在「作業中」の会社を選択できます。アプリのすべてのページは現在選択されている会社に依存しており、ユーザーはドロップダウンメニューから新しい会社を選択できます。ドロップダウンは、ナビゲーションバーに配置されるコンポーネントです。

アプリを再起動せずに、コンポーネントがchange.delegateハンドラーの現在のページを再読み込みできるようにしたいのですが。したがって、window.location.hrefの設定は問題外です。

aurelia Routerに現在のルート/ページを強制的にリロードさせる方法はありますか？

もう1つの方法は、EventAggregatorを使用してアプリ全体で会社の変更を通知することですが、そのためには、すべてのページでそのイベントにサブスクライブするか、そのイベントにサブスクライブする基本クラスからすべてのページを継承する必要があります。これらはより複雑なオプションです。

aurelia
17
Sergi Papaseit

これは現在のビューを強制的に再ロードする方法という正確な質問には答えませんが、現在の会社識別子をルートに追加することを検討しましたか？これで問題が解決し、ルートがブックマーク可能になります：つまり、_/#/company1/view1_および_/#/company2/view1_。ドロップダウンで会社を変更すると、新しいルートでrouter.navigate()が呼び出され、新しいビューがロード/更新されます。

あなたの正確な質問に答えるために、私は_router.navigate_オプション：router.navigate('myroute', {replace:true, trigger:true})をテストしましたが、正しいビューが既にロードされている場合、ビューの再ロードは強制されません。ルート名に_?ramdomNumber_を追加すると、ビューを強制的に再アクティブ化できます。

7
Sylvain

正式にはサポートされていませんが、 ハッキング 提案 関連するGitHubの問題 これだけの機能を要求します。

Aureliaのソースコードを更新したり、ルートに余分なデータを追加したりせずに私が作業したものは、次のように、すべてのルートの activationStrategy をデフォルトではなくinvokeLifecycleに設定することです。

import { activationStrategy } from 'aurelia-router';

export class App {

  configureRouter(config, router) {
    config.map([
      { 
        route: ['', 'home'],
        name: 'home',
        moduleId: 'home/index',
        activationStrategy: activationStrategy.invokeLifecycle
      },
      {
        route: 'users',
        name: 'users',
        moduleId: 'users/index',
        nav: true,
        activationStrategy: activationStrategy.invokeLifecycle
      },
      ... etc ...
    ]);
  }

}

これにより、ルートのactivate()メソッドが、ビューモデルがリロードされたときに期待どおりに実行されるようになります。次に、リロードを開始するコードで、次のことを行います。

this.router.navigateToRoute(
  this.router.currentInstruction.config.name,
  this.router.currentInstruction.params,
  { replace: true }
);
11
Technetium

これは、ページを更新するための簡単な解決策です。aurelia-history-browser.jsで、updateHash()にチェックを追加し、 new _hrefは古い_hrefと同じであり、次に（サーバーではなく）キャッシュからページをリロードします。

次に、ページを更新するには、既存のオプションを使用するだけです。

router.navigateToRoute('watch', {}, { replace: true, trigger: true });

更新されたコードは以下にコピーされます：

function updateHash(location, fragment, replace) {
    if (replace) {
      var _href = location.href.replace(/(javascript:|#).*$/, '') + '#' + fragment;
      if (_href == location.href)
        location.reload(false);
      else
        location.replace(_href);
    } else {
      location.hash = '#' + fragment;
    }
  }
1
gravsten

より良い答え：

_this.router.navigateToRoute(
  this.router.currentInstruction.config.name,
  {
    ...this.router.currentInstruction.params,
    reload: Number(this.router.currentInstruction.queryParams.reload || 0) + 1,
  },
  { trigger: true },
);
_

navigateToRoute()は3つのパラメータを取ります。

  1. ルートの名前：（現在の指示から取得）
  2. ルートパラメータ：（現在の命令から取得し、増分リロードを追加してルートを変更します。ルーターを実際にナビゲートする最も簡単な方法）
  3. オプション： _trigger: true_オプションは、通常のルーティングのviewModelまたはrouteConfigでこのオプションを設定する必要なしに、この特定のルーティング命令に_activationStrategy: invokeLifecycle_を強制します。
0
LStarky