javascript - 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。