子路由

Question

使用Angular 2 Router。我有2级路由（root routing和child routing]

我的问题是，当导航到子路径时，页面正在加载Child之后重新加载。

子级别路由

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

export const childRouting = RouterModule.forChild(childRoutes);

顶级路由

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);

从DetailsComponent

调用导航

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

    ngOnInit() { }

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

p.s

我试图保持这个问题的简短，所以如果需要更多代码，请告诉我，我很乐意添加它。

Answer 1

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