2

私の問題は、routerTransition を使用しているページがいくつかあることです。これは、(query(...)メソッドを使用して) いくつかの場所で見つけることができるためです。問題は、コンポーネントがブラウザの戻るボタンを押して出入りするときに、別のアニメーションが必要なことです。もう少し詳しく言うと：

  • 通常のナビゲーションでは、私のコンポーネントは右から左に入る必要があります
  • 後方ナビゲーションでは、コンポーネントは左から右に入る必要があります

離れる場合はその逆です。

ルーターイベントで、それが前方または後方のナビゲーションであるかどうかを何らかの方法で検出できれば、これを簡単に行うことができますが、ルートにさらにデータを追加しない限り、これを検出する方法を見つけることができませんでした.

編集：

@Vegaが言及したようなことをしようとしましたが、それについてのスニペットを貼り付けました。

テンプレート：

<div class="root" [@routerTransition]="navigationState$ | async" 
                  (@routerTransition.done)="onDone($event)">
    <sdx-router-outlet [size]="currentSize"></sdx-router-outlet>
</div>

コード：

this.navigationState$ = this._actions$.ofType(ActionTypes.GO_BACK)
    .map(() => {
        return { isGoingBack: true };
    })
    .merge(this._actions$.ofType(ActionTypes.GO_FORWARD).map(() => { return { isGoingBack: false }; }))
    .map((navigation: Navigation) => navigation.isGoingBack ? 'backward' : 'forward')
    .merge(this._resetNavigationState);

public onDone(event) {
    // This is just to reset to a state where I can trigger my animation again
    this._resetNavigationState.next('initial');
}

ここでのアイデアは、トランジション トリガーをforward前方に移動するbackwardときと後方に移動するときに設定するというものでした。ただし、（少なくともこれが原因だと思います）後方設定は基本的にng-locationサービスから「来る」ため、ルーターがナビゲートを開始する前に状態が設定され、トリガーがあったためアニメーションはありませんルーターアウトレットによってコンポーネントを取り付けたり取り外したりする前に発生します。

ご覧のとおり、ngrx を使用していますが、それは重要ではないと思います。2 つのタイプは、基本的に 2 つの Observable だけです。そのうちの 1 つは、@Vega が言ったように、戻るボタンを押して起動した場合、もう 1 つはカスタム ルーターで起動し (今のところ)、navigateByUrl メソッドをオーバーライドし、その中で Forward アクションをディスパッチして、スーパーを呼び出します。

私が言及しなかったのは、アニメーションはすべて同じであるため、ロードするコンポーネントにアニメーションを配置したくないということです。そして、「デフォルト」のアニメーションのようにすれば、いくつかのコンポーネントを付け忘れることを恐れる必要はありません。

4

0 に答える 0