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

编辑:问题是我试图从外面的组件访问ActivatedRoute <router-outlet>.所以看起来这是预期的行为.

但是我仍然认为我的答案对任何想要完成同样事情的人都有用.

我在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

获取<router-outlet>外部组件的路由自定义数据（Angular 8）：

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