如何使用Angular routing？

Question

我有一个页面(比方说page3)，可以从另外两个页面访问，比如page1(父URL将是parent1 - parent1/page1)和Page2(父URL将是parent2 - parent2/page2)。

由于angular在默认情况下会更改URL，因此我希望仅当我从page2导航时才阻止该URL更改，并且我希望当我从第1页导航时URL可以正常更改(对于所有父url为parent1的页面)。

我们可以通过以下方式完成此操作

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，而不覆盖哪些URL)。这样，您将不需要重构所有的router.navigate，而只需在component类中为每个组件指定一次规则：

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