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.