const appRoutes: Routes = [
{ path: 'parent', component: parentComp, data: { foo: 'parent data' }, children: [
{ path: 'child1', component: childComp1, data: { bar: 'child data 1' },
{ path: 'child2', component: childComp2, data: { bar: 'child data 2' }
]}
];
If I navigate to /parent/child2
and then look at the ActivatedRoute
from parentComp
, data.foo
is defined, but data.bar
is not. I have access to an array of all the children, but I don't know which one is activated.
How can I access the activated child route's data from a parent route's component?
First child will give you access to data
constructor(route: ActivatedRoute) {
route.url.subscribe(() => {
console.log(route.snapshot.firstChild.data);
});
}
Working with Angular 6, I managed to get the current route data from a parent component, with the following code:
I've configured the Router with the Extra options to inherit the parent routes data:
@NgModule({
imports: [
RouterModule.forRoot(routes, {
initialNavigation: 'enabled',
paramsInheritanceStrategy: 'always'
}),
...
})
export class AppModule {}
Then in my parent component, I was able to see the data changes with:
import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter, map } from 'rxjs/operators';
subs: Array<Subscription> = [];
constructor(private router: Router, private route: ActivatedRoute) {
this.subs[0] = this.router.events
.pipe(
filter(event => event instanceof NavigationEnd),
map(() => this.route.snapshot),
map(route => {
while (route.firstChild) {
route = route.firstChild;
}
return route;
})
)
.subscribe((route: ActivatedRouteSnapshot) => {
console.log(route.data);
});
}
ngOnDestroy() {
this.subs.forEach(s => s.unsubscribe());
}
Enjoy!
In Angular 8 work with:
data: any;
constructor(route: ActivatedRoute) {
this.data = route.snapshot.firstChild.data;
}
I am using Angular 8
Here is the routes
{
path: '',
component: DefaultLayoutComponent,
canActivate: [AuthGuardService],
children: [
{
path: 'dashboard',
component: DashboardComponent,
data: { title: 'Summary' },
},
{
path: 'account',
component: AccountComponent,
data: { title: 'account' },
},
{
path: 'setup',
component: setupComponent,
data: { title: 'setup' },
},
{
path: 'help',
component: helpComponent,
data: { title: 'help' },
},
],
}
Parent Component - DefaultLayoutComponent
constructor(private router: Router, private route: ActivatedRoute) { }
ngOnInit(): void {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
const title = this.route.snapshot.firstChild.data;
console.log('title-', title);
}
});
}
Output from console Access to the data in my parent component
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { Subscription } from 'rxjs';
@Component({
selector: 'sources',
templateUrl: './sources.component.html',
styleUrls: ['./sources.component.scss'],
})
export class SourcesComponent implements OnInit, OnDestroy {
constructor(private route: ActivatedRoute, private router: Router) { }
private sub: Subscription;
public title: string;
ngOnInit() {
this.sub = this.router.events.pipe(
filter(event=> event instanceof NavigationEnd)
)
.subscribe(events=>{
console.log(this.route.snapshot.firstChild.data);
})
}
ngOnDestroy(){
this.sub.unsubscribe();
}
}
My router looks like:
const routes: Routes = [
{
path: '',
component: SourcesComponent,
children: [
{
path: 'source',
component: SourcesTableComponent,
data: {title : 'Источники'},
},
{
path: 'category',
component: CategoryComponent,
data: {title : 'Категории'}
},
{
path: 'relation',
component: RelationComponent,
data: {title : 'Сведение категорий'}
},
]
},
];
Still spend some time to get a correct answer. ActivationEnd event what helped me
Router example:
const routes: Routes = [
{
path: '',
component: CustomComponent, // HTML parent wrapper with menu
data: {},
children: [
{
path: '',
component: SearchComponent,
data: { someId: 'id-1' }
},
{
path: 'somePath/create',
pathMatch: 'full',
component: CreateComponent,
data: { someId: 'id-2' }
},
Under your parent CustomComponent
constructor( private router: Router ) {
this.router.events
.pipe(filter((routerEvent) => routerEvent instanceof ActivationEnd))
.subscribe((routerEvent: ActivationEnd | any) => {
const data = routerEvent.snapshot.data;
if (data?.someId) {
console.log('someId', data.someId);
}
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.