2017-03-11 59 views
0

我有在Angular2应用与路线的麻烦,其中使用这样的按钮正常工作:Angular2 [routerLink]作品,this.router.navigate似乎崩溃的应用程序

<button [routerLink]="['/home/maincomponent']>Click</button> 

但使用相同的在一个函数中路由失败 - 页面似乎加载一瞬间,然后应用程序完全刷新并将我放回主/根页面,但控制台上没有错误。

goToComponent() { 
    this.router.navigate(['/home/maincomponent']); 
} 

而且,只需输入浏览器的路径导航到该路由加载成分的微没有任何错误或重定向。

http://localhost:4000/#/home/component 

路由器配置:

const routes: Routes = [ 
    { 
    path: 'home', 
    component: HomeComponent, 
    children: [{ 
     path: '', 
      redirectTo: 'dashboard', 
      pathMatch: 'full' 
     }, 
     { 
     path: 'dashboard', 
      component: DashboardComponent 
     }, 
     { 
     path: 'search', 
      component: SearchComponent 
     }, 
     { 
     path: 'maincomponent', 
      component: MainComponent 
     }, 
     { 
     path: '**', 
      component: DashboardComponent 
     }] 
    } 
]; 

@NgModule配置:

RouterModule.forRoot(routes, 
{ 
    useHash: true, 
    preloadingStrategy: PreloadAllModules 
}), 
+0

请问你可以把你的路由配置。 –

+0

我已将路由器配置添加到问题中。谢谢! –

回答

1

我找错了地方的问题。我想绑定函数调用(点击)到一个

<a href="" (click)="goToComponent">LINK</a> 

元素,它失败。

切换到

<span (click)="goToComponent">LINK</span> 

元件解决了这个问题。