如何从父路由的组件访问激活的子路由的数据？

Question

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

，然后从

ActivatedRoute

查看

parentComp

，

data.foo

已定义，但

data.bar

未定义。我可以访问所有子项的数组，但我不知道哪一个被激活。

如何从父路由的组件中访问激活的子路由的数据？

Answer 1

第一个孩子将让您访问数据

constructor(route: ActivatedRoute) {
  route.url.subscribe(() => {
    console.log(route.snapshot.firstChild.data);
   });
}

Answer 2

使用 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());
}

享受吧！

Answer 3

在 Angular 8 中使用：

data: any;

constructor(route: ActivatedRoute) {
  this.data = route.snapshot.firstChild.data;
}

Answer 4

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 : 'Сведение категорий'}
      },
    ]
  },
];

Answer 5

我正在使用 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);

      }
    });
}

控制台输出

Answer 6

还需要花一些时间才能得到正确答案。 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);
            }
        });
     }

Answer 7

在 Angular 16+ 中使用信号来编写此代码的另一种方法：

  private router = inject(Router);

  protected title = toSignal(
    this.router.events.pipe(
      filter(event => event instanceof ChildActivationEnd && event.snapshot.component === this.route.component),
      map((event: ChildActivationEnd) => event.snapshot?.firstChild?.data ?? {}),
      map(({ title }) => title as string)
    )
  );