2017-09-27 53 views
1

我有一個頁面(比如頁面3),可以從其他兩個頁面訪問頁面1(父網址爲parent1 - parent1/page1)和頁面2(父網址爲parent2 - parent2/page2)。如何使用Angular路由?

由於角度更改URL默認情況下,我想阻止URL更改,只有當我從page2導航,我希望URL正常更改時,我從頁面1導航(所有頁面與父url作爲parent1) 。

我們可以通過

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

做到這一點,但我怎麼可以這樣在一個共同的地方,因爲我有更多的頁面,如第4頁,第5頁,6頁,等我想阻止只有在特定的頁面位置變化。

回答

0

我認爲一個非阻塞和乾淨的方式是將路由器導航包裝在實現您的應用程序特定需求的助手類(或函數)中。

@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 */ ; 
    } 
} 
1

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

在事件處理程序(後導航踢)你可以檢查什麼是父網址,並用的方法,如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); 
    } 
    } 
});