Angular ActivatedRoute 数据返回一个空对象

Question

我有一条注册了一些数据的路线：

const routes: Routes = 
[
    {path: 'my-route', data: { title: 'MyTitle' }, component: MyComponent},
];

并且我正在尝试使用

ActivatedRoute

:

访问路线数据

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({...})
export class MyComponent implements OnInit {
  private routeData;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.routeData = this.route.data.subscribe((data) => {
      console.log(data); // this is returning an empty object {}
    });
  }
}

但由于某些原因

data

是一个空对象。

如何解决这个问题？

Answer 1

编辑：问题是我试图从位于<router-outlet>之外的组件访问ActivatedRoute。所以看起来这就是预期的行为。但是我仍然认为我下面的答案对于任何试图完成同样事情的人来说都是有用的。

我在 GitHub 上找到了一个解决方法（感谢

manklu

---

），我用它来完成我所需要的：

import { Component, OnInit } from '@angular/core';
import { Router, RoutesRecognized } from '@angular/router';

@Component({...})
export class MyComponent implements OnInit {
  private routeData;

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((data) => {
      if (data instanceof RoutesRecognized) {
        this.routeData = data.state.root.firstChild.data;
      }
    });
  }
}

这样做

this.routeData

将保存我需要的路线数据（在我的例子中是页面

title

）。

Answer 2

（Angular 8）：

constructor(private router: Router) {}
    
ngOnInit() {
    this.router.events.subscribe(data => {
      if (data instanceof ActivationStart) {
        console.log(`Custom data`, data.snapshot.data);
      }
    });
  }

Answer 3

Angular 6

开始， 这对我有用： （当然感谢shinDath）

  routeData;
  ngOnInit() {
    //child route param doesnt go up to parent route params.
    this.router.events.subscribe((val) => {
      if (val instanceof ActivationEnd) {
        if(!$.isEmptyObject(val.snapshot.params)){
          this.routeData = val.snapshot.params;
        }
      }
    });
  }

Answer 4

Angular 8

）：

constructor(private _router: Router, private _route: ActivatedRoute) {}

ngOnInit() {
  ...
  this.listenRouting();
}

listenRouting() {
    this._router.events.subscribe((router: any) => {
      routerUrl = router.url;
      if (routerUrl && typeof routerUrl === 'string') {
        routerList = routerUrl.slice(1).split('/');
        console.log("data.breadcrumbs", this._route.snapshot.routeConfig.children.find(child => child.path === routerList[routerList.length - 1]).data.breadcrumbs);
        ...
      }
    });
}

所以

data

“隐藏”在ActivatedRoute.snapshot.routeConfig.children数组下。除其他外，每个子项都包含数据。 在我的例子中，data是在routing.module中配置的，例如：

const routes: Routes = [
  { path: "facility-datas",
    component: FacilityTerminal,
    data: {
      breadcrumbs: "b ft"
    }
  },
...
];

Answer 5

link

this.router.events.pipe(
    filter((e) => e instanceof NavigationEnd),
    map(() => {
        let route = this.activatedRoute;

        while (route.firstChild) {
            route = route.firstChild;
        }

        return route;
    }),
    filter((route) => route.outlet === 'primary'),
    mergeMap((route) => route.data),
    tap(console.log)
);

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
) {}

Answer 6

<router-outlet>

此解决方案的灵感来自于

Brandon Roberts 的解决方案

，并针对 Angular 17（信号）和 RxJS 7 进行了更新。 app.component.ts

import { CommonModule } from '@angular/common'
import { Component, DestroyRef, OnInit, inject, signal } from '@angular/core'
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/router'
import { switchMap } from 'rxjs'
import { filter } from 'rxjs/operators'
import { LeftNavComponent } from './core/left-nav/left-nav.component'
import { RouteData } from './route-data'

@Component({
  standalone: true,
  imports: [LeftNavComponent, RouterModule, CommonModule],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  hideNav = signal(false)
  private readonly destroyRef = inject(DestroyRef)

  constructor(private readonly router: Router, private readonly activatedRoute: ActivatedRoute) {}

  ngOnInit(): void {
    console.log('AppComponent ngOnInit')
    this.router.events.pipe(
      takeUntilDestroyed(this.destroyRef),
      filter(e => e instanceof NavigationEnd),
      switchMap(() => this.activatedRoute.firstChild ? this.activatedRoute.firstChild.data : this.activatedRoute.data),
    ).subscribe((data: RouteData) => {
      this.hideNav.set(data.hideNav || false)
    })
  }
}

app.component.html

<div class="app-container">

  <main class="main-content">
    <router-outlet></router-outlet>
  </main>

  @if (!hideNav()) {
    <right-nav class="right-nav"></right-nav>
  }

</div>

路线数据.ts

输入的帮助界面

data

。

export interface RouteData {
  hideNav?: boolean
}

Answer 7

Answer 8

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.data);
}