路徑名

Question

我遇到了一些問題的組件路由器集成到我的Angular2應用程序試圖導航在我的應用我得到以下錯誤，當爲：'EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes:'

因此從＃1和官方的文檔一些建議我申請一個重定向對象我的孩子在航線路線我像這樣

children: [ 
    { 
     path: ':id', 
     component: DetailMoreLayout 
    }, 
    { 
     path: '', 
     redirectTo: 'parent-path', 
     pathMatch: 'full' 
    } 
] 

所以，在我的應用我有以下的路線。請注意0​​是我通過擴展Route對象進行自定義類型：

export const routes:DisplayRoutes = [ 
    { 
     path: '', 
     display: 'Home', 
     component: HomeComponent 
    }, { 
     path: 'about-us', 
     display: 'About Us', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'about-us', 
       pathMatch: 'full' 
      } 
     ] 
    }, { 
     path: 'teams', 
     display: 'Teams', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'teams', 
       pathMatch: 'full' 
      } 
     ] 
    }, { 
     path: 'careers', 
     display: 'Careers', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'careers', 
       pathMatch: 'full' 
      } 
     ] 
    }, { 
     path: 'press', 
     display: 'Presse', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailBlogLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailBlogLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'press', 
       pathMatch: 'full' 
      } 
     ] 
    }, { 
     path: 'technology', 
     display: 'Technology', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailBlogLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailBlogLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'technology', 
       pathMatch: 'full' 
      } 
     ] 
    }, { 
     path: 'promotion', 
     display: 'Promotion', 
     component: LessLayout 
    }, { 
     path: 'contact', 
     display: 'Contact', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      }, 
      { 
       path: '', 
       redirectTo: 'contact', 
       pathMatch: 'full' 
      } 
     ] 
    } 
]; 

一切現在是很酷，但我應該使用routerLink指令在我的HTML模板鏈接到一個路徑或組件中使用.navigateByUrl(route)或。 navigate([route])方法我的網址/路徑重複，因此http://localhost:4200/about-us/變成http://localhost:4200/about-us/about-us。即使直接或「深入鏈接」到http://localhost:4200/about-us url在瀏覽器中被更改爲http://localhost:4200/about-us/about-us

我在做什麼錯了？任何人都能看到？我曾嘗試將pathMatch: 'full'設置爲pathMatch: 'prefix'，但這不起作用。我正在使用"@angular/router": "3.0.0-beta.2"

Answer 1

不完全確定，因爲我還沒有玩過很多新的路由器，但我懷疑你應該改變你的重定向到redirectTo: '../about-us'。通過這種方式，將導航到父router，並在那裏搜索about-us路徑：

export const routes:DisplayRoutes = [ 
    { 
     path: '', 
     display: 'Home', 
     component: HomeComponent 
    }, { 
     path: 'about-us', 
     display: 'About Us', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      }, 
      { 
       path: '', 
       redirectTo: '../about-us', //<-- here 
       pathMatch: 'full' 
      } 
     ] 
    }, 
    ... 
] 

Answer 2

我覺得你在你的應用程序中實現經典的主從模式，它是componentless路由器的完美用例。

你需要重構你的父母模板，使用2個路由器出口左/右，並在那裏加載。

見這個優秀的article

旁註：您的應用程序當前行爲是內嵌配置。
當您在位置欄中輸入/about-us時，它會查找''路由器，並說要再次轉到about-us，以便它再次添加about-us。