Angular2: Cách tìm hiểu url trang trước là gì khi sử dụng định tuyến angular2

Question

Tôi đang phát triển ứng dụng angular2 và tôi sử dụng bộ định tuyến. Tôi đang ở trong một trang/myapp/đăng ký. sau khi đăng ký, tôi điều hướng việc sử dụng đến/myapp/login./myapp/login cũng có thể được điều hướng từ trang chủ của tôi là/myapp. Bây giờ, khi người dùng/myapp/login tôi quay lại. Điều này có thể được thực hiện bằng cách sử dụng location.back(). Nhưng tôi không muốn quay trở lại khi người dùng đến từ/myapp/đăng ký. Vì vậy, tôi nên kiểm tra xem người dùng có đến từ/myapp/signup không và nếu có, tôi muốn chuyển nó đến một nơi khác. Làm cách nào để biết url trước đó để tôi hướng người dùng đến một trạng thái cụ thể dựa trên đó?

Answer 1

Bạn có thể làm điều này với document.referrer

if(document.referrer !== '/myapp/signup'){ 
    location.back() 
} 

Answer 2

Bạn có lẽ có thể tận dụng OnActivate phase với routerOnActivate phương pháp cung cấp cho bạn truy cập vào địa chỉ trước đây và hiện tại.

routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) { 
    console.log(`Finished navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`); 
} 

Answer 3

Nhà điều hành pairwise cho phép để có được hiện tại cùng với giá trị trước đó

cập nhật  

import 'rxjs/add/operator/pairwise'; 
import 'rxjs/add/operator/filter'; 
import {Router} from '@angular/router; 

export class AppComponent { 
    constructor(private router: Router) { 
     this.router.events 
     .filter(e => e instanceof NavigationEnd) 
     .pairwise().subscribe((e) => { 
      console.log(e); 
     }); 
    } 
} 

Xem thêm How to detect a route change in Angular?

gốc (siêu cũ)

Tiêm Router và đăng ký các sự kiện và lưu trữ chúng để tham khảo sau

constructor(private _router: Router) { 
    this._router.subscribe(route => { 
    this.nextRoute ... 
    this.prevRoute ... 
    }); 

Answer 4

import {Location} from '@angular/common'; 

private currentLocation; 
constructor(private location: Location){ 
    this.currentLocation = this.location.path(); 
    } 

ngAfterViewInit() { 
let instance = this; 
this.router.parent.subscribe(() => {    
     if (instance.currentLocation != instance.location.path()) { 
      console.log("previous -> "+instance.currentLocation+" != next -> "+instance.location.path());    
     }else{ 
      console.log("previous -> "+instance.currentLocation+" == next -> "+instance.location.path()); 
     } 
    }); 
} 

Answer 5

Vâng, tôi sẽ làm điều đó theo cách này:

@Injectable() // do not forget to register this class as a provider 
export class PreviousRouteRecorder implements CanDeactivate<any> { 
    constructor(private router: Router) { 
    } 
    canDeactivate(component: any): Observable<boolean> | boolean { 
    localStorage.setItem('previousRoute', this.router.url); 
    return true; 
    } 
} 

export const ROUTES: Routes = [ 
    { 
    path: 'first', 
    component: FirstComponent, 
    canDeactivate: [PreviousRouteRecorder]}, 
    { 
    path: 'second', 
    component: SecondComponent 
    } 
]; 

export class SecondComponent implements OnInit { 
    ngOnInit(){ 
    console.log(localStorage.getItem('previousRoute')); 
    } 
} 

Answer 6

Việc triển khai với hai chiều sẽ không hoạt động nếu người dùng không kích hoạt sự kiện điều hướng ít nhất hai lần và có thể gây ra một lỗi nhỏ .

trang 1 -> trang 2 ---> chuyển hướng sự kiện kích hoạt, nhưng sự kiện Quan sát chỉ có 1 giá trị và do đó cặp không phát ra ---> Người dùng không thể quay về trang 1

trang 2 -> trang 3 -> sự kiện Quan sát hiện có 2 phần tử và phát ra theo từng cặp

Tôi tự hỏi liệu có cách giải quyết khác không?

Answer 7

Bạn có thể đặt url trước bằng trình bảo vệ quyền tác giả và đặt url trước đó vào bất kỳ ứng dụng nào.

canActivate(route: ActivatedRouteSnapshot, snapshot: RouterStateSnapshot) { 
       this.commonService.prevRouter = this.router.url; 
}