Angular 2中同一页面的多个路径名称

Question

是否可以为页面设置多个路径名称，具体取决于用户到达页面的方式，但保留相同的RouteConfig路径？

例如

@RouteConfig([
  {
    path: 'sweet/:id',
    name: 'SweetDetailLandingPage',
    component: SweetDetailComponent,
    data: { fromLink: false, fromDeepLink: true }
  },
{
    path: 'sweet/:id',
    name: 'SweetDetailFromLink',
    component: SweetDetailComponent,
    data: { fromLink: true, fromDeepLink: false }
  }
])

例如，如果用户将URL输入浏览器，我希望该应用程序加载SweetDetailLandingPage 。 如果用户通过navigate(['SweetDetailFromLink'])在内部到达页面，我想加载SweetDetailFromLink 。

原因是因为我想确定用户是否通过深层链接到达并且能够在加载时调用某些功能。

我尝试了这个代码，但应用程序抛出一个错误，说有冲突。

ORIGINAL EXCEPTION: Configuration 'sweet/:id' conflicts with existing route 'sweet/:id'

我明白为什么会有冲突。 我只是想知道是否有办法实现我上面解释的内容。

Answer 1

我会用另一种方法。 在外部读取window.location.href或者（如果它在根组件的构造函数中的Angular内部工作），如果你得到一个深层链接，那么从那里重定向。

在应用程序生命周期中只有一次可以加载深层链接，这是在加载应用程序时。 之后，URL更改始终会导致页面重新加载。 之后到达深层链接的唯一方法是使用Angular应用程序的代码（ routerLink或router.navigateXxx() 除了您使用的是HashLocationStrategy而不是默认的`PathLocationStrategy 。

Answer 2

在这种情况下我会做的是：在routerLinks中添加一个查询字符串参数this._router.navigate(['SweetDetailLandingPage', {fromDeepLink: 'true'}]); 然后在加载方法中，如果你来自深层链接或者不要求该参数，你想要做某事：

if (this.getParameterByName('fromDeepLink') === 'true'){
     //do something
}else{
     //do something different
}