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
}