[英]How can I get access to a component that is a child route from the parent component?
[英]How can I access an activated child route's data from the parent route's component?
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' }
]}
];
如果我導航到/parent/child2
child2 然后查看來自parentComp
的ActivatedRoute
,則定義了data.foo
,但沒有定義data.bar
。 我可以訪問所有子項的數組,但我不知道激活了哪個。
如何從父路由的組件訪問激活的子路由的數據?
第一個孩子會讓你訪問數據
constructor(route: ActivatedRoute) {
route.url.subscribe(() => {
console.log(route.snapshot.firstChild.data);
});
}
使用 Angular 6,我設法從父組件獲取當前路由數據,代碼如下:
我已經使用額外選項配置了路由器來繼承父路由數據:
@NgModule({
imports: [
RouterModule.forRoot(routes, {
initialNavigation: 'enabled',
paramsInheritanceStrategy: 'always'
}),
...
})
export class AppModule {}
然后在我的父組件中,我能夠看到數據的變化:
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());
}
享受!
在 Angular 8 中使用:
data: any;
constructor(route: ActivatedRoute) {
this.data = route.snapshot.firstChild.data;
}
我正在使用 Angular 8
以下是路線
{
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' },
},
],
}
父組件 - 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);
}
});
}
控制台輸出訪問我的父組件中的數據
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();
}
}
我的路由器看起來像:
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 : 'Сведение категорий'}
},
]
},
];
還是要花一些時間才能得到正確答案。 ActivationEnd事件對我有什么幫助
路由器示例:
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' }
},
在您的父級 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);
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.