如何確定Angular中的上一頁網址？

假設我目前位於具有URL /user/:id的頁面上。現在從此頁面導航到下一頁:id/posts。如何確定Angular中的上一頁網址？

現在有辦法了，以便我可以檢查以前的網址是什麼，即/user/:id。

下面是我的路線

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

來源

2016-12-08 Chandra Shekhar

您可以訂閱路由變化和當前事件存儲，所以你可以在下一次發生時使用它

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

也How to detect a route change in Angular 2?

來源

2016-12-08 12:04:34

謝謝@Günter你總是節省我的一天。 –

這沒有列出我以前的路線，只有當前的路線。 –

取決於你的期望。由於沒有先前的路線，它第一次是「空」。您還需要在根路由器上執行此操作，否則僅當您在此組件的子路由之間導航時纔會獲得。 –

-1

進樣Router和訂閱事件，並將其存儲供日後參考

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

來源

2016-12-08 12:03:28

見@GünterZöchbauer也可以將其保存在localStorage的，但我不喜歡它）更好的服務從那裏

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

來源

2017-12-17 08:38:22 vladymy

保存和獲取該值或許所有其他的答案是角2.X.

現在它不適用於角度5.X.我正在使用它。

只有NavigationEnd，你不能得到以前的網址。

因爲路由器從「NavigationStart」，「RoutesRecognized」，...到「NavigationEnd」工作。

您可以

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

檢查，但你仍然不能得到以前的網址，即使「NavigationStart」。

現在你需要使用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，你可以看到什麼網址來自和。

「RoutesRecognized」是從原點到目標網址的變化步驟。

所以過濾它，並從它得到以前的網址。

最後但並非最不重要的，

這段代碼放在父組件或更高（例如，app.component.ts）

因爲這段代碼火災完成佈線後。

來源

2017-12-19 05:14:21

創建一個注射服務：

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

    //... 

}

來源

2018-02-19 13:00:43 Juliano

我有類似的問題，當我想回到上一頁。解決方案比我想象的要容易。

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

然後它返回到父網址。我希望它能幫助別人;）

來源

2018-03-09 11:52:14 DiPix

如何確定Angular中的上一頁網址？

回答

相關問題