☰

Angularで前のページのURLを確認するにはどうすればいいですか？質問する

tag-icon • tag-icon angular angular2-routing
Angularで前のページのURLを確認するにはどうすればいいですか？質問する

現在、URL のページにいるとします/user/:id。このページから次のページに移動します:id/posts。

では、以前の URL が何であるかを確認できる方法はありますか/user/:id。

以下は私のルートです

export const routes: Routes = [
  { 
    path: 'user/:id', component: UserProfileComponent
  },
  {  
    path: ':id/posts', component: UserPostsComponet 
  }
];

ベストアンサー1

おそらく他のすべての回答は Angular 2.X に関するものです。

今のところ、Angular 5.X では動作しません。私はこれで作業中です。

NavigationEnd だけでは、前の URL を取得できません。

ルーターは「NavigationStart」、「RoutesRecognized」、...から「NavigationEnd」まで動作するためです。

確認するには

router.events.forEach((event) => {
  console.log(event);
});

しかし、"NavigationStart" を使用しても、以前の URL を取得することはできません。

ここで、ペアワイズを使用する必要があります。

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/pairwise';

constructor(private router: Router) {
  this.router.events
    .filter(e => e instanceof RoutesRecognized)
    .pairwise()
    .subscribe((event: any[]) => {
      console.log(event[0].urlAfterRedirects);
    });
}

ペアワイズを使用すると、URL の送信元と送信先を確認できます。

「RoutesRecognized」は、オリジンからターゲット URL への変更ステップです。

それをフィルタリングして、以前の URL を取得します。

最後になりましたが、重要なことです、

このコードを親コンポーネントまたは上位コンポーネント（例：app.component.ts）に配置します。

このコードはルーティングが完了した後に実行されるためです。

Angular 6+ を更新

フィルターがイベントの一部ではないためエラーevents.filterが発生します。コードを次のように変更します。

import { filter, pairwise } from 'rxjs/operators';

this.router.events
.pipe(filter((evt: any) => evt instanceof RoutesRecognized), pairwise())
.subscribe((events: RoutesRecognized[]) => {
  console.log('previous url', events[0].urlAfterRedirects);
  console.log('current url', events[1].urlAfterRedirects);
});

おすすめ記事