在子路由上重新加载页面 [英] Page reloading on child routing

问题描述

使用 Angular 2路由器.我有2级路由(根路由和子路由]

我的问题是，导航到子级 route 时，页面会在加载子级后重新加载.

子级路由

  const childRoutes:路线= [{小路: ''，组件:BaseComponent，孩子们: [{小路: ''，组件:DetailsComponent}，{路径:其他"，组件:OtherComponent}]}];出口const childRouting = RouterModule.forChild(childRoutes); 

顶级路由

  const appRoutes:路线= [{小路: ''，redirectTo:'/总览'，pathMatch:'full'}，{路径:概述"，组件:OverviewComponent}，{路径:"sub"，//这是childRoutes所属的模块.loadChildren:"app/components/sub.module#SubModule"}];export const appRoutingProviders:any [] = [];导出常量路由= RouterModule.forRoot(appRoutes); 

从DetailsComponent调用导航

 导出类DetailsComponent实现了OnInit {构造函数(专用路由器:路由器){}ngOnInit(){}onSubmit(){this.router.navigate(['/sub/other'])}} 

p.s

我正在尝试简化此问题，因此，如果需要更多代码，请告诉我，我很乐意添加.

解决方案

这是由默认浏览器提交行为引起的.要么调用 preventDefault()，在事件处理程序中返回 false ，要么添加 type ="button" 以防止提交事件的默认行为.

Using Angular 2 Router. I have a 2 level routing (root routing and child routing]

My problem is that when navigating to a child route the page is reloading after the Child is being loaded.

child level routing

const childRoutes: Routes = [
   {
    path: '',
    component: BaseComponent,
    children: [
           {
            path: '',
            component: DetailsComponent
           },
           {
               path: 'other',
               component: OtherComponent
           }
       ]
   }
];

export const childRouting = RouterModule.forChild(childRoutes);

Top Level Routing

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/overview',
        pathMatch: 'full'},
    {
        path: 'overview',
        component: OverviewComponent},
    {
        path: 'sub',
        //This is the module which the childRoutes belongs to.
        loadChildren: 'app/components/sub.module#SubModule'
    }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

call for navigation from DetailsComponent

export class DetailsComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() { }

    onSubmit() {
        this.router.navigate(['/sub/other'])
    }
}

p.s

I'm trying to keep this question short so if more code needed then please let me know and i will gladly add it.

解决方案

It's caused by the default browser submit behavior. Either call preventDefault(), return false in the event handler or add type="button" to prevent the submit event default behavior.

这篇关于在子路由上重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！