在我的项目中,我使用父组件。在父组件模板上可用<router-outlet></router-outlet>
。
路由文件:
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);
...和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"
问题:当我留在/home
并尝试重新定位到/home/report
=&gt; home.component
重新加载并重新启动所有ajax请求。如果我report.component
的孩子可以home.component
,我会尝试重新定位到另一个home.component
孩子=&gt; home.component
不应重新加载。我不会在Angular中找到这个。