Angular에서 이전 페이지 URL을 확인하는 방법은 무엇입니까?

Angular에서 이전 페이지 URL을 확인하는 방법은 무엇입니까?

---

현재 URL이있는 페이지에 있다고 가정합니다 /user/:id. 이제이 페이지에서 다음 페이지로 이동합니다 :id/posts.

이제 방법이 있습니까? 그러면 이전 URL이 무엇인지 확인할 수 있습니다 /user/:id.

아래는 내 경로입니다

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

---

경로 변경을 구독하고 현재 이벤트를 저장하여 다음에 발생할 때 사용할 수 있습니다.

previousUrl: string;
constructor(router: Router) {
  router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(e => {
    console.log('prev:', this.previousUrl);
    this.previousUrl = e.url;
  });
}

Angular 2에서 경로 변경을 감지하는 방법을 참조하십시오 .

---

아마도 다른 모든 대답은 각도 2.X에 대한 것입니다.

이제 각도 5.X에서는 작동하지 않습니다. 나는 그것으로 일하고있다.

NavigationEnd 만 있으면 이전 URL을 가져올 수 없습니다.

라우터는 "NavigationStart", "RoutesRecognized", ..., "NavigationEnd"에서 작동하기 때문입니다.

당신은 확인할 수 있습니다

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

그러나 여전히 "NavigationStart"를 사용해도 이전 URL을 가져올 수 없습니다.

이제 pairwise를 사용해야합니다.

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);
    });
}

pairwise를 사용하면 어떤 URL이 시작되고 있는지 확인할 수 있습니다.

"RoutesRecognized"는 출발지에서 타겟 URL로 변경하는 단계입니다.

그래서 그것을 필터링하고 그것에서 이전 URL을 가져옵니다.

마지막으로,

이 코드는 상위 구성 요소 이상 (예 : app.component.ts)을 넣습니다.

이 코드는 라우팅을 마친 후에 실행되기 때문입니다.

---

주입 가능한 서비스를 만듭니다.

import { Injectable } from '@angular/core';
import { Router, RouterEvent, NavigationEnd } from '@angular/router';

 /** A router wrapper, adding extra functions. */
@Injectable()
export class RouterExtService {

  private previousUrl: string = undefined;
  private currentUrl: string = undefined;

  constructor(private router : Router) {
    this.currentUrl = this.router.url;
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {        
        this.previousUrl = this.currentUrl;
        this.currentUrl = event.url;
      };
    });
  }

  public getPreviousUrl(){
    return this.previousUrl;
  }    
}

그런 다음 필요한 모든 곳에서 사용하십시오. 현재 변수를 가능한 한 빨리 저장하려면 AppModule에서 서비스를 사용해야합니다.

// AppModule
export class AppModule {
  constructor(private routerExtService: RouterExtService){}

  //...

}

// Using in SomeComponent
export class SomeComponent implements OnInit {

  constructor(private routerExtService: RouterExtService, private location: Location) { } 

  public back(): void {
    this.location.back();
  }

  //Strange name, but it makes sense. Behind the scenes, we are pushing to history the previous url
  public goToPrevious(): void {
    let previous = this.routerExtService.getPreviousUrl();

    if(previous)
      this.routerExtService.router.navigateByUrl(previous);
  }

  //...

}

---

이전 URL을 문자열로 가져 오기위한 Angular 6 업데이트 코드.

import { Router, RoutesRecognized } from '@angular/router';
import { filter, pairwise } from 'rxjs/operators';


export class AppComponent implements OnInit {

    constructor (
        public router: Router
    ) {
    }

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

---

이것은 각도 6에서 나를 위해 일했습니다.

this.router.events
            .subscribe((event) => {
              if (event instanceof NavigationStart) {
                window.localStorage.setItem('previousUrl', this.router.url);
              }
            });

---

@ GünterZöchbauer 또한 localstorage에 저장할 수 있지만 선호하지 않습니다) 서비스에 저장하고 거기 에서이 값을 얻는 것이 좋습니다.

 constructor(
        private router: Router
      ) {
        this.router.events
          .subscribe((event) => {
            if (event instanceof NavigationEnd) {
              localStorage.setItem('previousUrl', event.url);
            }
          });
      }

---

이전 페이지로 돌아가고 싶을 때 비슷한 문제가 발생했습니다. 솔루션은 제가 상상할 수있는 것보다 쉬웠습니다.

<button [routerLink]="['../']">
   Back
</button>

And it returns to parent url. I hope it will help someone ;)

참고URL : https://stackoverflow.com/questions/41038970/how-to-determine-previous-page-url-in-angular