如何使用 Angular 路由？

Question

我有一個頁面（比如 page3），它可以從另外兩個頁面訪問，比如 page1（父 URL 將是 parent1 - parent1/page1）和頁面 2（父 URL 將是 parent2 - parent2/page2）。

由於 angular 默認情況下會更改 URL，因此僅當我從 page2 導航時，我才希望阻止該 URL 更改，並且當我從第 1 頁導航時（對於父 url 為 parent1 的所有頁面），我希望 URL 正常更改。

我們可以通過

router.navigate('page2',{skipLocationChange: true});

但是我怎么能在一個共同的地方做到這一點，因為我有更多的頁面，比如 page4、page5、page6 等，我想防止僅針對特定頁面的位置更改。

Answer 1

您可以訂閱特定組件中的路由器事件： https : //v2.angular.io/docs/ts/latest/api/router/index/NavigationStart-class.html

在事件處理程序中（導航開始后），您可以檢查父 URL 是什么並使用history.replaceState()等方法覆蓋它

您可以創建全局配置注入，這些配置將定義所有規則（即覆蓋哪些 URL，哪些不覆蓋）。 這樣你就不需要重構所有的router.navigate而是只為組件類中的每個組件指定一次規則：

constructor(router: Router, overrideUrlService: overrideUrlService) {
  router.events.subscribe(event => {
    if(event instanceof NavigationStart) {
        //have the override logic in some injectable service
        overrideUrlService.checkUrl(event.url);
    }
  }
});

Answer 2

我認為一種非干擾性和干凈的方法是將路由器導航包裝在一個幫助類（或函數）中，該類（或函數）可實現您的應用程序特定需求。

@Injectable
class LocationAwareRouter {
    constructor(private router: Router) {
    }

    public navigate(url: string) {
        this.router.navigate(url, { skipLocationChange: this.isLocationChange(url) };
    }

    private isLocationChange(url: string): boolean {
        return /* your fancy URL evaluation here */ ;
    }
}