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)。