2017-08-31 107 views
0

我工作的一个Angular2应用程序,当我浏览到错误:无法匹配任何路线。 URL段: '账户'

http://localhost:4200/account

我得到

Error: Cannot match any routes. URL Segment: 'account'

我的路线是这样的:

export const appRoutes: Routes = [ 
    { 
     path: '', component: MyComponent, children: [ 
      { 
       path: '', component: HeaderComponent, outlet: 'header', children: [ 
        { 
         path: 'account', component: AccountComponent, children: [ 
          { path: 'login', component: LoginComponent, outlet: 'login' }, 
          { path: 'signup', component: SignupComponent, outlet: 'signup' }, 
         ] 
        } 
       ] 
      }, 
      { 
       path: '', component: ContentComponent, children: [ 
        { path: '', component: HomeComponent } 
       ] 
      }, 
      { path: '', component: FooterComponent, outlet: 'footer' }, 
     ] 
    }, 
]; 

有什么想法? 谢谢!

编辑1 以及我创造了这个

export const appRoutes: Routes = [ 
    { 
     path: '', component: MyComponent, children: [ 
      { 
       path: '', component: HeaderComponent, outlet: 'header', children: [ 
        { 
         path: 'account', component: AccountComponent, children: [ 
          { path: '', pathMatch: 'full', component: NotfoundComponent }, 
          { path: 'login', component: LoginComponent }, 
          { path: 'signup', component: SignupComponent }, 
         ] 
        } 
       ] 
      }, 
      { 
       path: '', component: ContentComponent, children: [ 
        { path: '', component: HomeComponent } 
       ] 
      }, 
      { path: '', component: FooterComponent, outlet: 'footer' }, 
      { path: '**', component: NotfoundComponent }, 
     ] 
    }, 
]; 

,并导航到账户/登录,它需要我没有找到 我失去了什么?可能与我的路线或结构有关?

+0

你为什么在LoginCo上使用命名插座mponent'和'SignupComponent'? –

+0

@GünterZöchbaueri希望能够在它们之间导航,这是问题吗? –

+0

应该不需要一个命名的插座来获取它。命名的网点是用于平行导航。比如在Gmail中,除了邮件文件夹的正常路由之外,撰写邮件对话框还有自己的菜单和路由。我最后尝试在路由配置中尝试命名的插座(而不是从'routerLink'或'router.navigate()'),并且我无法使其工作。 –

回答

0

您不能使用当前的路由配置路由到account

要么

  • 路线account/loginaccount/signup
  • 添加重定向该路径导航到的这两个
  • 一个添加用空路径
{ 
    path: '', component: MyComponent, children: [ 
     { 
      path: '', component: HeaderComponent, outlet: 'header', children: [ 
       { 
        path: 'account', component: AccountComponent, children: [ 
         { path: '', pathMatch: 'full', component: DummyComponent } 
         { path: 'login', component: LoginComponent }, 
         { path: 'signup', component: SignupComponent }, 
        ] 
       } 
      ] 
     }, 
... 
路由
+0

你可以检查编辑1 ?,我编辑我的问题 –

+0

'{path:'',component:HomeComponent}'needs'pathMatch:'full'' –

+0

Are you使用'ng-serve'? –

相关问题