typescript Angular ActivatedRoute 数据返回一个空对象

Angular ActivatedRoute data returns an empty object

提问by Francesco Borzi

I have a route registered with some data:

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

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

and I'm trying to access to the route's data using ActivatedRoute:

我正在尝试使用以下方法访问路线数据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 {}
    });
  }
}

but for some reasons datais an empty object.

但由于某些原因data是一个空对象。

How to solve this problem?

如何解决这个问题呢？

回答by Francesco Borzi

Edit: the problem is that I was trying to access the ActivatedRoute from a Component which is outsidethe <router-outlet>. So it looks like that this is the intended behaviour.

编辑：问题是，我试图从一个组件是访问ActivatedRoute之外的<router-outlet>。所以看起来这是预期的行为。

However I still think that my answer below can be useful to anyone who is trying to accomplish the same thing.

但是，我仍然认为我下面的回答对任何试图完成同样事情的人都有用。

---

---

我在 GitHub 上找到了一个解决方法（谢谢 manklumanklu）我用来完成我需要的：

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;
      }
    });
  }
}

doing this way this.routeDatawill hold the route data that I needed (in my case the page title).

这样做this.routeData将保存我需要的路线数据（在我的情况下是页面title）。

回答by Blazzze IL

I Don't know the version spoken, but as of Angular 6, this worked for me:

我不知道所说的版本，但从Angular 6 开始，这对我有用：

(Ofcourse thanks to shinDath)

（当然感谢 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;
        }
      }
    });
  }

回答by Josip

This is part of my code (NOTE: I'm using Angular 8):

这是我的代码的一部分（注意：我使用的是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);
        ...
      }
    });
}

So datais "hiding" under ActivatedRoute.snapshot.routeConfig.children Array. Each child contains, among other things, data. In my case datais configured in routing.module, e.g.:

所以数据“隐藏”在 ActivatedRoute.snapshot.routeConfig.children Array 下。每个孩子都包含数据等。在我的情况下，数据是在routing.module中配置的，例如：

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

回答by Rohit Ramname

Below should work:

下面应该工作：

constructor(private route: ActivatedRoute) {}

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