Page reload when routing children

Question

Using Angular 2 Router . I have 2 routing levels ( root routingand child routing]

My problem is that when I navigate along the child route, the page reloads after loading the Child.

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 to navigate from DetailsComponent

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

    ngOnInit() { }

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

ps

I try to keep this question short, so if more code is required, please let me know and I will gladly add it.

Answer 1

. preventDefault(), return false type="button", .