路径名

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。