typescript - Los datos de ActivatedRoute en Angular devuelven un objeto vacío

Tengo una ruta registrada con algunos datos:

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

y estoy tratando de acceder a los datos de la ruta usando 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 {}
    });
  }
}

pero por alguna razón data es un objeto vacío.

¿Cómo resolver este problema?

Respuesta #1

Editar: el problema es que estaba intentando acceder a ActivatedRoute desde un Componente que está fuera del <router-outlet>. Así que parece que este es el comportamiento previsto.

Sin embargo, todavía creo que mi respuesta a continuación puede ser útil para cualquiera que esté intentando lograr lo mismo.

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

Haciendo esto, this.routeData contendrá los datos de la ruta que necesitaba (en mi caso, el título de la página).

Respuesta #2

Obtener datos personalizados de la ruta para un componente fuera de <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);
      }
    });
  }