Preventing parent component to reloading while routing working
See original GitHub issueIn my project I use parent components. On parent components template 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 stay on /home
and try to relocate to /home/report
=> home.component
reloading and all ajax requests restarting. I supose if report.component
available as child of home.component
and I try to relocate to another home.component
child =>home.component
should not reloading. I am not shure available in Angular this.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:11 (5 by maintainers)
Top Results From Across the Web
Angular child routes reload parent component - Stack Overflow
How can I prevent the parent component from being reloaded every time a child router link is activated and deactivated? app-routing.module.ts ...
Read more >Angular Router: Child Routes, Auxiliary Routes, Master Detail
Learn how to use the Angular Router, avoid common pitfalls, learn Child Routes, Auxiliary Routes, setup a Master Detail Routing Scenario.
Read more >How to navigate to a parent route from a child route?
Approach: · Before performing the above two operations, there is a need to register this component in the Route class's instance which lies ......
Read more >How to prevent parent component from reloading when ...
Try to set a name for your route. And replace your router-link to param with an object. And remove router-view :key prop. It...
Read more >Router Guards • Angular - codecraft.tv
Guard Types · Maybe the user must login (authenticate) first. · Perhaps the user has logged in but is not authorized to navigate...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I also nitice that require typescript “1.9.0” version for angular core “2.0.0-rc.6” version. But such version not available. Can you fix my package.json and all require packages (not only angular)???))
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.