How to prevent loading parent component of preen in angular 2 during routing?

In my project, I use parent components. A parent component template is available <router-outlet></router-outlet>.

Routing Files:

app.routing.ts:

import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { CanDeactivateGuard } from './can-deactivate-guard.service';

export const appRoutes: Routes = [{ 
    path: 'login', 
    component: LoginComponent
}, {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
}, {
    path: 'home',
    loadChildren: 'app/app/home/home.module#HomeModule'
}];
export const appRoutingProviders: any[] = [
    CanDeactivateGuard
];
export const routing = RouterModule.forRoot(appRoutes);

home.routing.ts:

import { Routes, RouterModule }  from '@angular/router';
import { GLComponent } from './gl/gl.component';
import { ReportComponent } from './report/report.component';
import { HomeComponent } from './home.component';
import { HomeCommonComponent } from './home-common.component';

const homeRoutes: Routes = [{
    path: '',
    component: HomeComponent,
    children: [{
        path: 'report',
        component: ReportComponent
    }, {
        path: '',
        component: HomeCommonComponent
    }, {
        path: 'gl',
        loadChildren: 'app/app/home/gl/gl.module#GLModule'
    }]
}];
export const homeRouting = RouterModule.forChild(homeRoutes);

gl.routing.ts:

import { Routes, RouterModule } from '@angular/router';
import { GLComponent } from './gl.component';
import { TransactionComponent } from './transaction/transaction.component';
import { GLCommonComponent } from './gl-common.component';

const glRoutes: Routes = [{
    path: '',
    component: GLComponent,
    children: [{
        path: 'transaction',
        component: TransactionComponent,
    }, {
        path: '',
        component: GLCommonComponent
    }
]}];
export const glRouting = RouterModule.forChild(glRoutes);

... and versions of Angular:

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.5"

Problem: when I stop at /homeand try to move to reboot /home/report=> home.componentand everyone restarts all ajax requests. I suppose, if report.componentavailable as a child home.component, and I'm trying to move it to another home.componentchild => home.component, I should not reload. I do not know how to do this in Angular.

+4

Source: https://habr.com/ru/post/1653314/


All Articles