如何使用Angular路由？

问题描述：

我有一个页面（比如页面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页，等我想阻止只有在特定的页面位置变化。

答

我认为一个非阻塞和干净的方式是将路由器导航包装在实现您的应用程序特定需求的助手类（或函数）中。

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

答

您可以订阅的路由器事件的特定组件： 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); 
    } 
    } 
});

如何使用Angular路由？

相关推荐