web-dev-qa-db-ja.com

Angular 4で同じルートにrouter.navigateして、同じイベントをキャッチする方法は？

さて、ここで私の質問には2つの使用例があります。

  1. _/en/register_ルートを持つアプリケーションで作業しています。ルートでthis.router.navigate([this.routeParams.lang, 'register']);を実行するボタンをクリックすると、すべて正常に機能します。これはすべて正常です。これにより、コンストラクター（またはngOnInit）に_($('#modalRegister') as any).modal('show');_でモーダルが開きます。

    それはすべてうまくいきますが、モーダルを閉じると、ルートは_/en/register/_のままです（そうすれば_/en_に移動できますが、これを提案する前にユースケース＃2を参照してください）。ボタンをクリックすると、何も実行されません。コンストラクタもngOnInitも呼び出されていませんnot evenroute.params.subscribe（）またはroute.url.subscribe（）（これは彼らがすべきだと思う...）.

  2. 同じアプリケーションで、検索を実行してマップ内のマーカーを中央に配置するボタンがあります（_/en/search/blah_内）。インデックスページまたはにいる場合は、検索クエリを変更するだけで十分です。ただし、ユーザーがマップを別の場所にドラッグし、同じマーカーを再び中央に配置したい場合は、this.router.navigate(['search', this.searchQuery]);を実行し、最終的に同じルートになる場合（たとえば、検索ボタンを2回クリックする）何もしません。

URLが変更されていない場合にコンポーネントが再作成されないようにするのは良いことだと私は同意しますが、UIルーターでは同じことを実行でき、（覚えている限り）機能するため、これは悪い設計です。 。

したがって、Angular 4では、同じURLに移動するように指示されているときに、ルートのコンポーネントのコンストラクタ/ ngOnInitで同じコードを実行するにはどうすればよいですか？ URLは同じで、それに応じて動作しますか？（私はまだそれは悪いデザインだと思いますが、とにかく...）。

アドバイスは大歓迎です。ありがとう！

javascriptangularroutingroutesangular-ui-router
8
DARKGuy

現在のコンポーネントのコンストラクターとngOnInit関数を「再ロード」する必要があるとき、私が見つけた唯一の解決策は一種の回避策でした：

「this.router.navigate」がプロミスを返すという事実を使用しました。それで、私はどこか別の場所に移動して戻りました。少し見苦しいですが、機能し、UIは影響を受けません。

this.router.navigate(..[somewhere else]..)
    .then(()=>{this.router.navigate(..back..)})

それが役に立てば幸い。

7
rotemx

ケース1の場合

モーダルを開くためだけに新しいルートに移動するのはなぜですか。関数の呼び出しと同じルートにいるだけです。新しいルートに移動する場合は、モーダルクローズイベントでthis.router.navigate("/")を再度呼び出すことができます。

ケース2の場合、これでうまくいくと思います。

currentSearchQuery: string;

ngOnInit() {
  this.route.paramMap
    .switchMap((params: ParamMap) => {
        this.currentSearchQuery = params.get('searchQuery');
        updateMarkers();
      });

}
3
Dulaj Atapattu

ルートの最後にダミーパラメータ/ en/register/jk2h4-42hj-234n2-234dfgまたは/ en/register？val = jk2h4-42hj-234n2-234dfgのようなクエリパラメータを追加するだけです

同じルートを呼び出すときにパラメータ値を変更します。したがって、ブラウザはURLの変更とAngualrコンポーネントがライフサイクル全体から機能し始めることを認識しています。

1
kamprasad

私はこの回避策を使用します

this.router.navigate(['path']).then(()=>  {window.location.reload();});
0
FlyingTurtle